diff --git a/apps/demo/src/app.ts b/apps/demo/src/app.ts index 8e7b109ee..0b1c6d03e 100644 --- a/apps/demo/src/app.ts +++ b/apps/demo/src/app.ts @@ -1,14 +1,38 @@ -//require('@nativescript/canvas-polyfill'); +import { Helpers } from '@nativescript/canvas/helpers'; +Helpers.initialize(); +require('@nativescript/canvas-polyfill'); // import { CanvasRenderingContext2D } from '@nativescript/canvas'; declare const jp, GDPerformanceMonitor; let monitor; - +import { Canvas } from '@nativescript/canvas'; import { Application, path as filePath, knownFolders, Utils, path as nsPath, ImageSource, Trace } from '@nativescript/core'; Application.on('discardedError', (args) => { console.log(args.error); }); +// 0.253ms 1 +// 0.438ms 10 +// 17.375ms 100 +// 27.237ms 1000 + +/// 35764.462ms 1_000_000 + +/// 2.068ms 1 +// 0.354ms 10 +// 0.600ms 100 +// 3.155ms 1000 + +// 4243.135ms 1_000_000 +// 3631.408ms 1_000_000 ... before ctor update + +/* +JSI + JS: CONSOLE TIME: TextEncoder: 2.423ms + JS: CONSOLE TIME: TextDecoder: 0.646ms +*/ + +// : CONSOLE TIME: data: 4.250ms image data Application.on('launch', (args) => { require('@nativescript/canvas-polyfill'); if (global.isAndroid) { @@ -23,6 +47,83 @@ Application.on('launch', (args) => { monitor.appVersionHidden = true; monitor.deviceVersionHidden = true; } + + const paths = new Array(10); + const length = paths.length; + console.time('data'); + for (let i = 0; i < length; i++) { + const id = new ImageData(1000, 1000); + const size = id.width + id.height; + const length = id.data.length; + } + console.timeEnd('data'); +}); + +Application.android.on('activityCreated', (args) => { + const canvas = Canvas.createCustomView(); + const context = canvas.getContext('2d'); + console.log(canvas.width, canvas.height); + + const ctx = canvas.getContext('2d') as never as CanvasRenderingContext2D; + + console.time('fill'); + const fill = ctx.fillStyle; + console.timeEnd('fill'); + + //console.log(context.measureText('Osei Fortune')); + //console.log(context.createImageData(100,100)); + + // Create path + let region = new Path2D() as any; + region.moveTo(30, 90); + region.lineTo(110, 20); + region.lineTo(240, 130); + region.lineTo(60, 130); + region.lineTo(190, 20); + region.lineTo(270, 90); + region.closePath(); + + let path = new Path2D() as any; + path.addPath(region); + + console.log('new', path.__toSVG()); + + /* + JS: CONSOLE LOG: M30 90L110 20L240 130L60 130L190 20L270 90L30 90Z + JS: CONSOLE TIME: svg: 1.376ms + */ + + /* + JS: CONSOLE LOG: 300 150 + JS: CONSOLE LOG: M30 90L110 20L240 130L60 130L190 20L270 90L30 90Z + JS: CONSOLE TIME: svg: 0.819ms + JS: CONSOLE LOG: M30 90L110 20L240 130L60 130L190 20L270 90L30 90Z + JS: CONSOLE TIME: svg: 0.424ms + */ + + console.time('svg'); + console.log(region.__toSVG()); + console.timeEnd('svg'); + + setTimeout(() => { + const r = new Path2D(region) as any; + console.time('svg1'); + console.log(r.__toSVG()); + console.timeEnd('svg1'); + }, 1000); + + setTimeout(() => { + const r = new Path2D(region) as any; + console.time('svg2'); + console.log(r.__toSVG()); + console.timeEnd('svg2'); + }, 1500); + + // Fill path + ctx.fillStyle = 'green'; + ctx.fill(region, 'evenodd'); + //ctx.fillRect(0, 0, 100, 100); + android.util.Log.d('JS', canvas.toDataURL()); }); Application.run({ moduleName: 'app-root' }); diff --git a/packages/canvas-media/platforms/android/canvas_media.aar b/packages/canvas-media/platforms/android/canvas_media.aar index b7a73b77d..271ba6c51 100644 Binary files a/packages/canvas-media/platforms/android/canvas_media.aar and b/packages/canvas-media/platforms/android/canvas_media.aar differ diff --git a/packages/canvas-polyfill/platforms/android/canvas_polyfill.aar b/packages/canvas-polyfill/platforms/android/canvas_polyfill.aar index 663056108..821c83f26 100644 Binary files a/packages/canvas-polyfill/platforms/android/canvas_polyfill.aar and b/packages/canvas-polyfill/platforms/android/canvas_polyfill.aar differ diff --git a/packages/canvas/Canvas/index.android.ts b/packages/canvas/Canvas/index.android.ts index 3592652e9..78d408a0a 100644 --- a/packages/canvas/Canvas/index.android.ts +++ b/packages/canvas/Canvas/index.android.ts @@ -3,7 +3,7 @@ import { DOMMatrix } from '../Canvas2D'; import { CanvasRenderingContext2D } from '../Canvas2D/CanvasRenderingContext2D'; import { WebGLRenderingContext } from '../WebGL/WebGLRenderingContext'; import { WebGL2RenderingContext } from '../WebGL2/WebGL2RenderingContext'; -import { Application, View, profile, Device, Screen, knownFolders, ImageSource } from '@nativescript/core'; +import { Application, View, profile, Device, Screen, knownFolders, ImageSource, Utils } from '@nativescript/core'; export function createSVGMatrix(): DOMMatrix { return new DOMMatrix(); } @@ -222,13 +222,13 @@ export class Canvas extends CanvasBase { } toDataURL(type = 'image/png', encoderOptions = 0.92) { - const toDataURL = this._getMethod('__toDataURL'); + //const toDataURL = this._getMethod('__toDataURL'); - if (toDataURL === undefined) { - return 'data:,'; - } + // if (toDataURL === undefined) { + // return 'data:,'; + // } - return toDataURL(type, encoderOptions); + return this.native.__toDataURL(type, encoderOptions); } snapshot(flip: boolean = false): ImageSource | null { @@ -302,9 +302,7 @@ export class Canvas extends CanvasBase { // this._canvas.initContext(type, opts.alpha, opts.antialias, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.desynchronized, opts.xrCompatible); const ctx = this._canvas.create2DContext(opts.alpha, opts.antialias, opts.depth, opts.failIfMajorPerformanceCaveat, opts.powerPreference, opts.premultipliedAlpha, opts.preserveDrawingBuffer, opts.stencil, opts.desynchronized, opts.xrCompatible, opts.fontColor); - this._2dContext = new (CanvasRenderingContext2D as any)(ctx); - //this._2dContext = new (CanvasRenderingContext2D as any)(this._canvas, opts); // // @ts-ignore diff --git a/packages/canvas/Canvas/index.d.ts b/packages/canvas/Canvas/index.d.ts index 36baf236f..cf5ad49ff 100644 --- a/packages/canvas/Canvas/index.d.ts +++ b/packages/canvas/Canvas/index.d.ts @@ -40,6 +40,13 @@ export declare class Canvas extends CanvasBase { toDataURL(type?: string, encoderOptions?: number): any; + + getContext(type: '2d', options?: any): CanvasRenderingContext2D | null; + + getContext(type: 'webgl', options?: any): WebGLRenderingContext | null; + + getContext(type: 'webgl2', options?: any): WebGL2RenderingContext | null; + getContext(type: string, options?: any): CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext | null; getBoundingClientRect(): { diff --git a/packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts b/packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts index 8dca30918..ec4b2dbff 100644 --- a/packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts +++ b/packages/canvas/Canvas2D/CanvasRenderingContext2D/index.ts @@ -19,7 +19,7 @@ export class CanvasRenderingContext2D { static { Helpers.initialize(); //ctor = global.CanvasJSIModule.create2DContext; - ctor = global.CanvasJSIModule.create2DContextWithPointer; + ctor = global.CanvasModule.create2DContextWithPointer; } constructor(context: any, contextOptions) { @@ -266,42 +266,42 @@ export class CanvasRenderingContext2D { } __toDataURL(type: string = 'image/jpg', quality: number = 92) { - const __toDataURL = this._getMethod('__toDataURL'); - return __toDataURL(type, quality); + //const __toDataURL = this._getMethod('__toDataURL'); + return this.context.__toDataURL(type, quality); } addHitRegion(region: any): void {} arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void { this._ensureLayoutBeforeDraw(); - const arc = this._getMethod('arc'); - arc(x, y, radius, startAngle, endAngle, anticlockwise); + //const arc = this._getMethod('arc'); + this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise); } arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void { this._ensureLayoutBeforeDraw(); - const arcTo = this._getMethod('arcTo'); - arcTo(x1, y1, x2, y2, radius); + //const arcTo = this._getMethod('arcTo'); + this.context.arcTo(x1, y1, x2, y2, radius); } beginPath(): void { this._ensureLayoutBeforeDraw(); - const beginPath = this._getMethod('beginPath'); - beginPath(); + //const beginPath = this._getMethod('beginPath'); + this.context.beginPath(); } bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void { this._ensureLayoutBeforeDraw(); - const bezierCurveTo = this._getMethod('bezierCurveTo'); - bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); + //const bezierCurveTo = this._getMethod('bezierCurveTo'); + this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); } clearHitRegions(): void {} clearRect(x: number, y: number, width: number, height: number): void { this._ensureLayoutBeforeDraw(); - const clearRect = this._getMethod('clearRect'); - clearRect(x, y, width, height); + //const clearRect = this._getMethod('clearRect'); + this.context.clearRect(x, y, width, height); } clip(): void; @@ -312,22 +312,22 @@ export class CanvasRenderingContext2D { clip(...args: any): void { this._ensureLayoutBeforeDraw(); - const clip = this._getMethod('clip'); + //const clip = this._getMethod('clip'); if (typeof args[0] === 'string') { - clip(args[0]); + this.context.clip(args[0]); } else if (args[0] instanceof Path2D && typeof args[1] === 'string') { - clip(args[0].native, args[1]); + this.context.clip(args[0].native, args[1]); } else if (args[0] instanceof Path2D) { - clip(args[0].native); + this.context.clip(args[0].native); } else { - clip(); + this.context.clip(); } } closePath(): void { this._ensureLayoutBeforeDraw(); - const closePath = this._getMethod('closePath'); - closePath(); + //const closePath = this._getMethod('closePath'); + this.context.closePath(); } createImageData(width: number, height: number): ImageData; @@ -344,8 +344,8 @@ export class CanvasRenderingContext2D { createLinearGradient(x0: number, y0: number, x1: number, y1: number) { this._ensureLayoutBeforeDraw(); - const createLinearGradient = this._getMethod('createLinearGradient'); - return CanvasGradient.fromNative(createLinearGradient(x0, y0, x1, y1)); + //const createLinearGradient = this._getMethod('createLinearGradient'); + return CanvasGradient.fromNative(this.context.createLinearGradient(x0, y0, x1, y1)); } createPattern(image: any, repetition: string): CanvasPattern | null { @@ -356,39 +356,39 @@ export class CanvasRenderingContext2D { throw e; } - const createPattern = this._getMethod('createPattern'); - + //const createPattern = this._getMethod('createPattern'); + //const createPattern = this.context.createPattern; let img; if (image?._type === '2d' || image?._type?.indexOf('webgl') > -1) { img = (image as any).native; } else if (image instanceof ImageSource) { - const ptr = this._getMethod('__getPointer'); - const createPattern = this._getMethod('__createPatternWithNative'); + //const ptr = this.context.__getPointer; //this._getMethod('__getPointer'); + //const createPattern = this.context.__createPatternWithNative; //this._getMethod('__createPatternWithNative'); if (global.isAndroid) { img = image.android; - const pattern = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition); - return new CanvasPattern(createPattern(pattern)); + const pattern = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(this.context.__getPointer()), img, repetition); + return new CanvasPattern(this.context.__createPatternWithNative(pattern)); } if (global.isIOS) { img = image.ios; - const pattern = NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition); - return new CanvasPattern(createPattern(pattern)); + const pattern = NSCCanvasRenderingContext2D.createPattern(this.context.__getPointer(), img, repetition); + return new CanvasPattern(this.context.__createPatternWithNative(pattern)); } return null; } else if (global.isAndroid && image instanceof android.graphics.Bitmap) { - const ptr = this._getMethod('__getPointer'); - const createPattern = this._getMethod('__createPatternWithNative'); + //const ptr = this.context.__getPointer; //this._getMethod('__getPointer'); + const createPattern = this.context.__createPatternWithNative; //this._getMethod('__createPatternWithNative'); if (global.isAndroid) { - const pattern = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), image, repetition); - return new CanvasPattern(createPattern(pattern)); + const pattern = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(this.context.__getPointer()), image, repetition); + return new CanvasPattern(this.context.__createPatternWithNative(pattern)); } if (global.isIOS) { - const pattern = NSCCanvasRenderingContext2D.createPattern(long(ptr), image, repetition); - return new CanvasPattern(createPattern(pattern)); + const pattern = NSCCanvasRenderingContext2D.createPattern(this.context.__getPointer(), image, repetition); + return new CanvasPattern(this.context.__createPatternWithNative(pattern)); } return null; @@ -403,18 +403,18 @@ export class CanvasRenderingContext2D { } else if (image._asset instanceof ImageAsset) { img = image._asset.native; } else if (typeof image.src === 'string') { - const ptr = this._getMethod('__getPointer'); - const createPattern = this._getMethod('__createPatternWithNative'); + //const ptr = this.context.__getPointer; //this._getMethod('__getPointer'); + //const createPattern = this.context.__createPatternWithNative; //this._getMethod('__createPatternWithNative'); if (global.isAndroid) { img = ImageSource.fromFileSync(image.src).android; - const pattern = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition); - return new CanvasPattern(createPattern(pattern)); + const pattern = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.createPattern(long(this.context.__getPointer()), img, repetition); + return new CanvasPattern(this.context.__createPatternWithNative(pattern)); } if (global.isiOS) { img = ImageSource.fromFileSync(image.src).android; - const pattern = NSCCanvasRenderingContext2D.createPattern(long(ptr), img, repetition); - return new CanvasPattern(createPattern(pattern)); + const pattern = NSCCanvasRenderingContext2D.createPattern(this.context.__getPointer(), img, repetition); + return new CanvasPattern(this.context.__createPatternWithNative(pattern)); } return null; @@ -428,31 +428,31 @@ export class CanvasRenderingContext2D { return null; } - return new CanvasPattern(createPattern(img, repetition)); + return new CanvasPattern(this.context.createPattern(img, repetition)); } createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number) { this._ensureLayoutBeforeDraw(); - const createRadialGradient = this._getMethod('createRadialGradient'); - return CanvasGradient.fromNative(createRadialGradient(x0, y0, r0, x1, y1, r1)); + //const createRadialGradient = this._getMethod('createRadialGradient'); + return CanvasGradient.fromNative(this.context.createRadialGradient(x0, y0, r0, x1, y1, r1)); } drawPaint(color: string) { this._ensureLayoutBeforeDraw(); - const drawPaint = this._getMethod('drawPaint'); - drawPaint(color); + //const drawPaint = this._getMethod('drawPaint'); + this.context.drawPaint(color); } drawPoint(x: number, y: number) { this._ensureLayoutBeforeDraw(); - const drawPoint = this._getMethod('drawPoint'); - drawPoint(x, y); + //const drawPoint = this._getMethod('drawPoint'); + this.context.drawPoint(x, y); } drawPoints(mode: 'points' | 'lines' | 'polygon', points: { x: number; y: number }[]) { this._ensureLayoutBeforeDraw(); - const drawPoints = this._getMethod('drawPoints'); - drawPoints(mode, points); + //const drawPoints = this._getMethod('drawPoints'); + this.context.drawPoints(mode, points); } drawFocusIfNeeded(element): void; @@ -469,42 +469,42 @@ export class CanvasRenderingContext2D { drawImage(...args): void { this._ensureLayoutBeforeDraw(); - const drawImage = this._getMethod('drawImage'); + //const drawImage = this.context.drawImage; //this._getMethod('drawImage'); const drawNativeImage = (args, image) => { - const ptr = this._getMethod('__getPointer'); - const makeDirty = this._getMethod('__makeDirty'); + //const ptr = this.context.__getPointer; //this._getMethod('__getPointer'); + //const makeDirty = this.context.__makeDirty; //this._getMethod('__makeDirty'); let dirty = false; if (args.length === 3) { if (global.isAndroid) { - dirty = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2]); + dirty = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(this.context.__getPointer()), image, args[1], args[2]); } if (global.isIOS) { - dirty = NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2]); + dirty = NSCCanvasRenderingContext2D.drawImage(this.context.__getPointer(), image, args[1], args[2]); } } else if (args.length === 5) { if (global.isAndroid) { - dirty = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4]); + dirty = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(this.context.__getPointer()), image, args[1], args[2], args[3], args[4]); } if (global.isIOS) { - dirty = NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4]); + dirty = NSCCanvasRenderingContext2D.drawImage(this.context.__getPointer(), image, args[1], args[2], args[3], args[4]); } } else if (args.length === 9) { if (global.Android) { - dirty = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); + dirty = (org as any).nativescript.canvas.NSCCanvasRenderingContext2D.drawImage(long(this.context.__getPointer()), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); } if (global.isIOS) { - dirty = NSCCanvasRenderingContext2D.drawImage(long(ptr), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); + dirty = NSCCanvasRenderingContext2D.drawImage(this.context.__getPointer(), image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); } } if (dirty) { - makeDirty(); + this.context.__makeDirty(); } }; @@ -563,18 +563,18 @@ export class CanvasRenderingContext2D { } if (args.length === 3) { - drawImage(image, args[1], args[2]); + this.context.drawImage(image, args[1], args[2]); } else if (args.length === 5) { - drawImage(image, args[1], args[2], args[3], args[4]); + this.context.drawImage(image, args[1], args[2], args[3], args[4]); } else if (args.length === 9) { - drawImage(image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); + this.context.drawImage(image, args[1], args[2], args[3], args[4], args[5], args[6], args[7], args[8]); } } ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void { this._ensureLayoutBeforeDraw(); - const ellipse = this._getMethod('ellipse'); - ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); + //const ellipse = this._getMethod('ellipse'); + this.context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); } fill(): void; @@ -585,44 +585,44 @@ export class CanvasRenderingContext2D { fill(...args: any): void { this._ensureLayoutBeforeDraw(); - const fill = this._getMethod('fill'); + //const fill = this.context.fill; //this._getMethod('fill'); if (typeof args[0] === 'string') { - fill(args[0]); + this.context.fill(args[0]); } else if (args[0] instanceof Path2D && typeof args[1] === 'string') { - fill(args[0].native, args[1]); + this.context.fill(args[0].native, args[1]); } else if (args[0] instanceof Path2D) { - fill(args[0].native); + this.context.fill(args[0].native); } else { - fill(); + this.context.fill(); } } fillRect(x: number, y: number, width: number, height: number): void { this._ensureLayoutBeforeDraw(); - const fillRect = this._getMethod('fillRect'); - fillRect(x, y, width, height); + //const fillRect = this._getMethod('fillRect'); + this.context.fillRect(x, y, width, height); } fillText(text: string, x: number, y: number, maxWidth: number): void { this._ensureLayoutBeforeDraw(); - const fillText = this._getMethod('fillText'); + //const fillText = this.context.fillText; //this._getMethod('fillText'); if (typeof maxWidth === 'number') { - fillText(text + '', x, y, maxWidth); + this.context.fillText(text + '', x, y, maxWidth); } else { - fillText(text + '', x, y); + this.context.fillText(text + '', x, y); } } getImageData(sx: number, sy: number, sw: number, sh: number): ImageData { this._ensureLayoutBeforeDraw(); - const getImageData = this._getMethod('getImageData'); - return ImageData.fromNative(getImageData(sx, sy, sw, sh)); + //const getImageData = this._getMethod('getImageData'); + return ImageData.fromNative(this.context.getImageData(sx, sy, sw, sh)); } getLineDash(): number[] { this._ensureLayoutBeforeDraw(); - const getLineDash = this._getMethod('getLineDash'); - return getLineDash(); + //const getLineDash = this._getMethod('getLineDash'); + return this.context.getLineDash(); } isPointInPath(x: number, y: number, fillRule: string): boolean; @@ -631,13 +631,13 @@ export class CanvasRenderingContext2D { isPointInPath(...args): boolean { this._ensureLayoutBeforeDraw(); - const isPointInPath = this._getMethod('isPointInPath'); + //const isPointInPath = this.context.isPointInPath; //this._getMethod('isPointInPath'); if (args.length === 2) { - return isPointInPath(args[0], args[1]); + return this.context.isPointInPath(args[0], args[1]); } else if (args.length === 3) { - return isPointInPath(args[0], args[1], args[2]); + return this.context.isPointInPath(args[0], args[1], args[2]); } else if (args.length === 4 && args[0] instanceof Path2D) { - return isPointInPath(args[0].native, args[1], args[2], args[3]); + return this.context.isPointInPath(args[0].native, args[1], args[2], args[3]); } return false; } @@ -648,31 +648,31 @@ export class CanvasRenderingContext2D { isPointInStroke(...args): boolean { this._ensureLayoutBeforeDraw(); - const isPointInStroke = this._getMethod('isPointInStroke'); + //const isPointInStroke = this.context.isPointInStroke; // this._getMethod('isPointInStroke'); if (args.length === 2) { - return isPointInStroke(args[0], args[1]); + return this.context.isPointInStroke(args[0], args[1]); } else if (args.length === 3 && args[0] instanceof Path2D) { - return isPointInStroke(args[0].native, args[1], args[2]); + return this.context.isPointInStroke(args[0].native, args[1], args[2]); } return false; } lineTo(x: number, y: number): void { this._ensureLayoutBeforeDraw(); - const lineTo = this._getMethod('lineTo'); - lineTo(x, y); + //const lineTo = this._getMethod('lineTo'); + this.context.lineTo(x, y); } measureText(text: string): TextMetrics { this._ensureLayoutBeforeDraw(); - const measureText = this._getMethod('measureText'); - return new TextMetrics(measureText(text)); + //const measureText = this._getMethod('measureText'); + return new TextMetrics(this.context.measureText(text)); } moveTo(x: number, y: number): void { this._ensureLayoutBeforeDraw(); - const moveTo = this._getMethod('moveTo'); - moveTo(x, y); + //const moveTo = this._getMethod('moveTo'); + this.context.moveTo(x, y); } putImageData(imageData: ImageData, dx: number, dy: number): void; @@ -687,65 +687,65 @@ export class CanvasRenderingContext2D { return; } - const putImageData = this._getMethod('putImageData'); + //const putImageData = this.context.putImageData; //this._getMethod('putImageData'); let data = args[0] as any; if (args.length === 3) { - putImageData(data.native, args[1], args[2]); + this.context.putImageData(data.native, args[1], args[2]); } else if (args.length === 7) { - putImageData(data.native, args[1], args[2], args[3], args[4], args[5], args[6]); + this.context.putImageData(data.native, args[1], args[2], args[3], args[4], args[5], args[6]); } } quadraticCurveTo(cpx: number, cpy: number, x: number, y: number) { this._ensureLayoutBeforeDraw(); - const quadraticCurveTo = this._getMethod('quadraticCurveTo'); - quadraticCurveTo(cpx, cpy, x, y); + //const quadraticCurveTo = this._getMethod('quadraticCurveTo'); + this.context.quadraticCurveTo(cpx, cpy, x, y); } rect(x: number, y: number, width: number, height: number): void { this._ensureLayoutBeforeDraw(); - const rect = this._getMethod('rect'); - rect(x, y, width, height); + //const rect = this._getMethod('rect'); + this.context.rect(x, y, width, height); } public roundRect(x: number, y: number, width: number, height: number, radii: number): void; public roundRect(x: number, y: number, width: number, height: number, radii: number[]): void; public roundRect(x: unknown, y: unknown, width: unknown, height: unknown, radii: unknown): void { this._ensureLayoutBeforeDraw(); - const roundRect = this._getMethod('roundRect'); - roundRect(x, y, width, height, radii); + //const roundRect = this._getMethod('roundRect'); + this.context.roundRect(x, y, width, height, radii); } removeHitRegion(id: string): void {} resetTransform(): void { this._ensureLayoutBeforeDraw(); - const resetTransform = this._getMethod('resetTransform'); - resetTransform(); + //const resetTransform = this._getMethod('resetTransform'); + this.context.resetTransform(); } restore(): void { this._ensureLayoutBeforeDraw(); - const restore = this._getMethod('restore'); - restore(); + //const restore = this._getMethod('restore'); + this.context.restore(); } rotate(angle: number): void { this._ensureLayoutBeforeDraw(); - const rotate = this._getMethod('rotate'); - rotate(angle); + //const rotate = this._getMethod('rotate'); + this.context.rotate(angle); } save(): void { this._ensureLayoutBeforeDraw(); - const save = this._getMethod('save'); - save(); + //const save = this._getMethod('save'); + this.context.save(); } scale(x: number, y: number): void { this._ensureLayoutBeforeDraw(); - const scale = this._getMethod('scale'); - scale(x, y); + //const scale = this._getMethod('scale'); + this.context.scale(x, y); } scrollPathIntoView(): void; @@ -756,54 +756,54 @@ export class CanvasRenderingContext2D { setLineDash(segments: number[]): void { this._ensureLayoutBeforeDraw(); - const setLineDash = this._getMethod('setLineDash'); - setLineDash(segments); + //const setLineDash = this._getMethod('setLineDash'); + this.context.setLineDash(segments); } setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void { this._ensureLayoutBeforeDraw(); - const setTransform = this._getMethod('setTransform'); - setTransform(a, b, c, d, e, f); + //const setTransform = this._getMethod('setTransform'); + this.context.setTransform(a, b, c, d, e, f); } stroke(): void; stroke(path?: Path2D): void { this._ensureLayoutBeforeDraw(); - const stroke = this._getMethod('stroke'); + //const stroke = this.context.stroke; //this._getMethod('stroke'); if (path) { - stroke(path.native); + this.context.stroke(path.native); } else { - stroke(); + this.context.stroke(); } } strokeRect(x: number, y: number, width: number, height: number): void { this._ensureLayoutBeforeDraw(); - const strokeRect = this._getMethod('strokeRect'); - strokeRect(x, y, width, height); + //const strokeRect = this._getMethod('strokeRect'); + this.context.strokeRect(x, y, width, height); } strokeText(text: string, x: number, y: number, maxWidth?: number): void { this._ensureLayoutBeforeDraw(); - const strokeText = this._getMethod('strokeText'); + //const strokeText = this.context.strokeText; //this._getMethod('strokeText'); if (typeof maxWidth === 'number') { - strokeText(text + '', x, y, maxWidth); + this.context.strokeText(text + '', x, y, maxWidth); } else { - strokeText(text + '', x, y); + this.context.strokeText(text + '', x, y); } } transform(a: number, b: number, c: number, d: number, e: number, f: number): void { this._ensureLayoutBeforeDraw(); - const transform = this._getMethod('transform'); - transform(a, b, c, d, e, f); + //const transform = this._getMethod('transform'); + this.context.transform(a, b, c, d, e, f); } translate(x: number, y: number): void { this._ensureLayoutBeforeDraw(); - const translate = this._getMethod('translate'); - translate(x, y); + //const translate = this._getMethod('translate'); + this.context.translate(x, y); } private _ensureLayoutBeforeDraw() { diff --git a/packages/canvas/Canvas2D/ImageData/index.ts b/packages/canvas/Canvas2D/ImageData/index.ts index a7d1c82c1..29e88ba30 100644 --- a/packages/canvas/Canvas2D/ImageData/index.ts +++ b/packages/canvas/Canvas2D/ImageData/index.ts @@ -3,7 +3,7 @@ let ctor; export class ImageData { static { Helpers.initialize(); - ctor = global.CanvasJSIModule.ImageData; + ctor = global.CanvasModule.ImageData; } _native; constructor(width: number, height: number); @@ -34,19 +34,19 @@ export class ImageData { throw Error("Failed to construct 'ImageData': The input data length is not a multiple of (4 * width"); } if (length == 2) { - this._native = ctor(data, width, data.length / row); + this._native = new ctor(data, width, data.length / row); } else if (length > 2) { // TODO support colorSpace - this._native = ctor(data, width, arguments[2]); + this._native = new ctor(data, width, arguments[2]); } } else if (typeof arguments[0] === 'number') { const width = arguments[0]; const height = arguments[1]; if (length == 2) { - this._native = ctor(width, height); + this._native = new ctor(width, height); } else if (length > 2) { // TODO support colorSpace - this._native = ctor(width, height); + this._native = new ctor(width, height); } } diff --git a/packages/canvas/Canvas2D/Path2D/index.ts b/packages/canvas/Canvas2D/Path2D/index.ts index 3c0360c73..61b2f10e2 100644 --- a/packages/canvas/Canvas2D/Path2D/index.ts +++ b/packages/canvas/Canvas2D/Path2D/index.ts @@ -6,18 +6,23 @@ let ctor; export class Path2D { static { Helpers.initialize(); - ctor = global.CanvasJSIModule.Path2D; + ctor = global.CanvasModule.Path2D; } _native; constructor(instance?: any) { let nativeInstance; + if (!instance) { + nativeInstance = new ctor(); + this._native = nativeInstance; + return this; + } if (typeof instance === 'string') { - nativeInstance = ctor(instance); + nativeInstance = new ctor(instance); } else if (instance instanceof Path2D) { - nativeInstance = ctor(instance.native); + nativeInstance = new ctor(instance.native); } else { - nativeInstance = ctor(); + nativeInstance = new ctor(); } this._native = nativeInstance; } @@ -39,68 +44,68 @@ export class Path2D { } addPath(path: Path2D, transform?: DOMMatrix): void { - const addPath = this._getMethod('addPath'); + //const addPath = this._getMethod('addPath'); if (transform) { - addPath(path.native, transform.native); + this.native.addPath(path.native, transform.native); } else { - addPath(path.native, null); + this.native.addPath(path.native, null); } } arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void { - const arc = this._getMethod('arc'); - arc(x, y, radius, startAngle, endAngle, anticlockwise); + //const arc = this._getMethod('arc'); + this.native.arc(x, y, radius, startAngle, endAngle, anticlockwise); } arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void { - const arcTo = this._getMethod('arcTo'); - arcTo(x1, y1, x2, y2, radius); + //const arcTo = this._getMethod('arcTo'); + this.native.arcTo(x1, y1, x2, y2, radius); } bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void { - const bezierCurveTo = this._getMethod('bezierCurveTo'); - bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); + //const bezierCurveTo = this._getMethod('bezierCurveTo'); + this.native.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); } closePath(): void { - const closePath = this._getMethod('closePath'); - closePath(); + //const closePath = this._getMethod('closePath'); + this.native.closePath(); } ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean = false): void { - const ellipse = this._getMethod('ellipse'); - ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); + //const ellipse = this._getMethod('ellipse'); + this.native.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); } lineTo(x: number, y: number): void { - const lineTo = this._getMethod('lineTo'); - lineTo(x, y); + //const lineTo = this._getMethod('lineTo'); + this.native.lineTo(x, y); } moveTo(x: number, y: number): void { - const moveTo = this._getMethod('moveTo'); - moveTo(x, y); + //const moveTo = this._getMethod('moveTo'); + this.native.moveTo(x, y); } quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void { - const quadraticCurveTo = this._getMethod('quadraticCurveTo'); - quadraticCurveTo(cpx, cpy, x, y); + //const quadraticCurveTo = this._getMethod('quadraticCurveTo'); + this.native.quadraticCurveTo(cpx, cpy, x, y); } rect(x: number, y: number, width: number, height: number): void { - const rect = this._getMethod('rect'); - rect(x, y, width, height); + //const rect = this._getMethod('rect'); + this.native.rect(x, y, width, height); } public roundRect(x: number, y: number, width: number, height: number, radii: number): void; public roundRect(x: number, y: number, width: number, height: number, radii: number[]): void; public roundRect(x: unknown, y: unknown, width: unknown, height: unknown, radii: unknown): void { - const roundRect = this._getMethod('roundRect'); - roundRect(x, y, width, height, radii); + //const roundRect = this._getMethod('roundRect'); + this.native.roundRect(x, y, width, height, radii); } __toSVG() { - const __toSVG = this._getMethod('__toSVG'); - return __toSVG(); + //const __toSVG = this._getMethod('__toSVG'); + return this.native.__toSVG(); } } diff --git a/packages/canvas/ImageAsset/index.ts b/packages/canvas/ImageAsset/index.ts index b1d5dd145..62a42699f 100644 --- a/packages/canvas/ImageAsset/index.ts +++ b/packages/canvas/ImageAsset/index.ts @@ -5,7 +5,7 @@ let ctor; export class ImageAsset { static { Helpers.initialize(); - ctor = global.CanvasJSIModule.ImageAsset; + ctor = global.CanvasModule.ImageAsset; } _native; @@ -13,7 +13,7 @@ export class ImageAsset { return this._native; } constructor(native?) { - this._native = native || ctor(); + this._native = native || new ctor(); } get width() { @@ -42,14 +42,15 @@ export class ImageAsset { } fromUrlSync(url: string): boolean { - const fromUrlSync = this._getMethod('fromUrlSync'); - return fromUrlSync(url); + // const fromUrlSync = this._getMethod('fromUrlSync'); + // return fromUrlSync(url); + return this.native.fromUrlSync(url); } fromUrl(url: string) { - const fromUrlCb = this._getMethod('fromUrlCb'); + //const fromUrlCb = this._getMethod('fromUrlCb'); return new Promise((resolve, reject) => { - fromUrlCb(url, (success, error) => { + this.native.fromUrlCb(url, (success, error) => { if (error) { reject(error); } else { @@ -60,7 +61,7 @@ export class ImageAsset { } fromFileSync(path: string): boolean { - const fromFileSync = this._getMethod('fromFileSync'); + // const fromFileSync = this._getMethod('fromFileSync'); let realPath = path; if (typeof realPath === 'string') { if (realPath.startsWith('~/')) { @@ -68,11 +69,11 @@ export class ImageAsset { } } - return fromFileSync(realPath); + return this.native.fromFileSync(realPath); } fromFile(path: string) { - const fromFileCb = this._getMethod('fromFileCb'); + //const fromFileCb = this._getMethod('fromFileCb'); return new Promise((resolve, reject) => { if (typeof path === 'string') { if (path.startsWith('~/')) { @@ -80,7 +81,7 @@ export class ImageAsset { } } - fromFileCb(path, (success, error) => { + this.native.fromFileCb(path, (success, error) => { if (error) { reject(error); } else { @@ -115,12 +116,12 @@ export class ImageAsset { */ loadFromBytesSync(bytes: Uint8Array | Uint8ClampedArray) { - const fromBytesSync = this._getMethod('fromBytesSync'); - return fromBytesSync(bytes); + //const fromBytesSync = this._getMethod('fromBytesSync'); + return this.native.fromBytesSync(bytes); } loadFromBytes(bytes: Uint8Array | Uint8ClampedArray) { - const fromBytesCb = this._getMethod('fromBytesCb'); + //const fromBytesCb = this._getMethod('fromBytesCb'); return new Promise((resolve, reject) => { const callback = new org.nativescript.canvas.TNSImageAsset.Callback({ onError(error) { @@ -131,7 +132,7 @@ export class ImageAsset { }, }); - fromBytesCb(bytes, (success, error) => { + this.native.fromBytesCb(bytes, (success, error) => { if (error) { reject(error); } else { @@ -142,19 +143,19 @@ export class ImageAsset { } scale(x: number, y: number) { - const scale = this._getMethod('scale'); - scale(x, y); + //const scale = this._getMethod('scale'); + this.native.scale(x, y); } saveSync(path: string, format: ImageAssetSaveFormat): boolean { - const saveSync = this._getMethod('saveSync'); - return saveSync(path, format); + //const saveSync = this._getMethod('saveSync'); + return this.native.saveSync(path, format); } save(path: string, format: ImageAssetSaveFormat): Promise { - const saveCb = this._getMethod('saveCb'); + //const saveCb = this._getMethod('saveCb'); return new Promise((resolve, reject) => { - saveCb(path, format, (success, error) => { + this.native.saveCb(path, format, (success, error) => { if (error) { reject(error); } else { diff --git a/packages/canvas/TextDecoder/index.ts b/packages/canvas/TextDecoder/index.ts index c8d9c4670..38f3c12f6 100644 --- a/packages/canvas/TextDecoder/index.ts +++ b/packages/canvas/TextDecoder/index.ts @@ -5,7 +5,7 @@ let ctor; export class TextDecoder { static { Helpers.initialize(); - ctor = global.CanvasJSIModule.TextDecoder; + ctor = global.CanvasModule.TextDecoder; } _native; @@ -25,8 +25,8 @@ export class TextDecoder { } constructor(encoding: string = 'utf-8') { - this._native = ctor(encoding); - this._getMethod('decode'); + this._native = new ctor(encoding); + //this._getMethod('decode'); } get encoding(): string { @@ -39,7 +39,7 @@ export class TextDecoder { if (buffer.byteLength === 0) { return ''; } - return this._decode(buffer); + return this.native.decode(buffer); } else { return ''; } diff --git a/packages/canvas/TextEncoder/index.ts b/packages/canvas/TextEncoder/index.ts index 7f4fd79e4..599a76c42 100644 --- a/packages/canvas/TextEncoder/index.ts +++ b/packages/canvas/TextEncoder/index.ts @@ -5,7 +5,7 @@ let ctor; export class TextEncoder { static { Helpers.initialize(); - ctor = global.CanvasJSIModule.TextEncoder; + ctor = global.CanvasModule.TextEncoder; } _native; @@ -25,8 +25,8 @@ export class TextEncoder { } constructor(encoding: string = 'utf8') { - this._native = ctor(encoding); - this._getMethod('encode'); + this._native = new ctor(encoding); + //this._getMethod('encode'); } get encoding(): string { @@ -38,8 +38,8 @@ export class TextEncoder { if (text === undefined) { return new Uint8Array(0); } else if (text === null) { - text = this._encode('null'); + text = this.native.encode('null'); } - return this._encode(text); + return this.native.encode(text); } } diff --git a/packages/canvas/platforms/android/canvas-release.aar b/packages/canvas/platforms/android/canvas-release.aar index c504d2d09..6e94928dd 100644 Binary files a/packages/canvas/platforms/android/canvas-release.aar and b/packages/canvas/platforms/android/canvas-release.aar differ diff --git a/packages/canvas/platforms/android/include.gradle b/packages/canvas/platforms/android/include.gradle index 8b43b73cc..932ef2e67 100644 --- a/packages/canvas/platforms/android/include.gradle +++ b/packages/canvas/platforms/android/include.gradle @@ -7,8 +7,19 @@ allprojects { } dependencies { + +constraints { + implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.8.20") { + because("kotlin-stdlib-jdk7 is now a part of kotlin-stdlib") + } + implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.8.20") { + because("kotlin-stdlib-jdk8 is now a part of kotlin-stdlib") + } + } + // implementation 'org.nativescript:canvas:1.0.0' implementation "androidx.multidex:multidex:2.0.1" + implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.8.20' } @@ -30,5 +41,9 @@ android { pickFirst 'lib/arm64-v8a/libc++_shared.so' pickFirst 'lib/x86_64/libc++_shared.so' pickFirst 'lib/x86/libc++_shared.so' + pickFirst 'lib/arm64-v8a/libNativeScript.so' + pickFirst 'lib/armeabi-v7a/libNativeScript.so' + pickFirst 'lib/x86/libNativeScript.so' + pickFirst 'lib/x86_64/libNativeScript.so' } } \ No newline at end of file diff --git a/packages/canvas/src-native/canvas-android/.idea/compiler.xml b/packages/canvas/src-native/canvas-android/.idea/compiler.xml index fb7f4a8a4..b589d56e9 100644 --- a/packages/canvas/src-native/canvas-android/.idea/compiler.xml +++ b/packages/canvas/src-native/canvas-android/.idea/compiler.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/packages/canvas/src-native/canvas-android/.idea/deploymentTargetDropDown.xml b/packages/canvas/src-native/canvas-android/.idea/deploymentTargetDropDown.xml index 39359257c..39c5e2d58 100644 --- a/packages/canvas/src-native/canvas-android/.idea/deploymentTargetDropDown.xml +++ b/packages/canvas/src-native/canvas-android/.idea/deploymentTargetDropDown.xml @@ -7,11 +7,11 @@ - + - + \ No newline at end of file diff --git a/packages/canvas/src-native/canvas-android/.idea/dictionaries/triniwiz.xml b/packages/canvas/src-native/canvas-android/.idea/dictionaries/triniwiz.xml index 3cb63835c..a6f7601af 100644 --- a/packages/canvas/src-native/canvas-android/.idea/dictionaries/triniwiz.xml +++ b/packages/canvas/src-native/canvas-android/.idea/dictionaries/triniwiz.xml @@ -16,6 +16,7 @@ nativescript osei parameterf + parameteri pname premultiplied premultiply diff --git a/packages/canvas/src-native/canvas-android/.idea/gradle.xml b/packages/canvas/src-native/canvas-android/.idea/gradle.xml index 6c1e515f3..05fb892b1 100644 --- a/packages/canvas/src-native/canvas-android/.idea/gradle.xml +++ b/packages/canvas/src-native/canvas-android/.idea/gradle.xml @@ -7,7 +7,7 @@