feat: callDrawBeforeShapes property

Author: farfromrefug

src/canvas.android.ts

@@ -530,6 +530,9 @@ class CanvasView extends CanvasBase {
     shapePaint: IPaint;
     onDraw(canvas: ICanvas) {
         const shapeCanvas = this.shapesCanvas;
+        if (this.callDrawBeforeShapes) {
+            this.notify({ eventName: 'draw', object: this, canvas: this.augmentedCanvas });
+        }
         if (shapeCanvas) {
             if (!this.shapePaint) {
                 this.shapePaint = new android.graphics.Paint() as any;
@@ -543,7 +546,9 @@ class CanvasView extends CanvasBase {
                 shapes.forEach((s) => s.drawMyShapeOnCanvas(this.augmentedCanvas as any, this as any, width, height));
             }
         }
-        this.notify({ eventName: 'draw', object: this, canvas: this.augmentedCanvas });
+        if (!this.callDrawBeforeShapes) {
+            this.notify({ eventName: 'draw', object: this, canvas: this.augmentedCanvas });
+        }
     }
     nativeViewProtected: com.akylas.canvas.CanvasView;
     createNativeView() {

src/canvas.common.ts

@@ -19,6 +19,7 @@ export function createRectF(x: number, y: number, w: number, h: number) {
 
 export const cachedProperty = new Property<CanvasBase, boolean>({ name: 'cached', defaultValue: false, valueConverter: booleanConverter });
 export const hardwareAcceleratedProperty = new Property<CanvasBase, boolean>({ name: 'hardwareAccelerated', defaultValue: true, valueConverter: booleanConverter });
+export const callDrawBeforeShapesProperty = new Property<CanvasBase, boolean>({ name: 'callDrawBeforeShapes', defaultValue: false, valueConverter: booleanConverter });
 export const densityProperty = new Property<CanvasBase, number>({ name: 'density', valueConverter: parseFloat });
 
 function throttle(fn, limit) {
@@ -37,6 +38,8 @@ export const DEFAULT_SCALE = Screen.mainScreen.scale;
 export abstract class CanvasBase extends View {
     protected _shapes: ObservableArray<Shape>;
 
+    callDrawBeforeShapes = false;
+
     get shapes() {
         return this._shapes;
     }
@@ -182,4 +185,5 @@ export abstract class CanvasBase extends View {
 
 cachedProperty.register(CanvasBase);
 hardwareAcceleratedProperty.register(CanvasBase);
+callDrawBeforeShapesProperty.register(CanvasBase);
 densityProperty.register(CanvasBase);

src/canvas.ios.ts

@@ -1919,6 +1919,9 @@ export class UICustomCanvasView extends UIView {
             this._canvas = new Canvas(0, 0);
         }
         this._canvas.setContext(context, size.width, size.height);
+        if (owner.callDrawBeforeShapes) {
+            owner.onDraw(this._canvas);
+        }
         // this._canvas.scale(1 / owner.density, 1 / owner.density);
         // this._canvas.setDensity(owner.density);
         if (owner.shapesCanvas) {
@@ -1933,7 +1936,9 @@ export class UICustomCanvasView extends UIView {
                 shapes.forEach((s) => s.drawMyShapeOnCanvas(this._canvas, owner, size.width, size.height));
             }
         }
-        owner.onDraw(this._canvas);
+        if (!owner.callDrawBeforeShapes) {
+            owner.onDraw(this._canvas);
+        }
         if (drawFameRate) {
             const end = Date.now();
             if (!this.frameRatePaint) {