@leafer/canvas 1.0.0-alpha.30 → 1.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.31",
   "description": "@leafer/canvas",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,9 +19,9 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/list": "1.0.0-alpha.30"
+    "@leafer/list": "1.0.0-alpha.31"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.30"
+    "@leafer/interface": "1.0.0-alpha.31"
   }
 }

package/src/Canvas.ts

@@ -30,7 +30,6 @@ export class Canvas implements ICanvasAttr {
 
     public context: ICanvasContext2D
 
-
     // canvas attr
 
     @contextAttr('imageSmoothingEnabled')

package/src/LeaferCanvasBase.ts

@@ -6,7 +6,6 @@ import { DataHelper } from '@leafer/data'
 import { Canvas } from './Canvas'
 
 
-
 const temp = new Bounds()
 const minSize: IScreenSizeData = { width: 1, height: 1, pixelRatio: 1 }
 
@@ -40,7 +39,9 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
 
     public recycled?: boolean
 
-    protected savedblendMode: string
+    public worldTransform: IMatrixData = {} as IMatrixData
+
+    protected savedBlendMode: string
 
     constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
         super()
@@ -97,46 +98,43 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
 
     public setWorld(matrix: IMatrixData, parentMatrix?: IMatrixData, onlyTranslate?: boolean): void {
         const { pixelRatio } = this
+        const w = this.worldTransform
         if (parentMatrix) {
 
             if (onlyTranslate) {
                 this.setTransform(
-                    matrix.a * pixelRatio,
-                    matrix.b * pixelRatio,
-                    matrix.c * pixelRatio,
-                    matrix.d * pixelRatio,
-                    (matrix.e + parentMatrix.e) * pixelRatio,
-                    (matrix.f + parentMatrix.f) * pixelRatio
+                    w.a = matrix.a * pixelRatio,
+                    w.b = matrix.b * pixelRatio,
+                    w.c = matrix.c * pixelRatio,
+                    w.d = matrix.d * pixelRatio,
+                    w.e = (matrix.e + parentMatrix.e) * pixelRatio,
+                    w.f = (matrix.f + parentMatrix.f) * pixelRatio
                 )
             } else {
                 const { a, b, c, d, e, f } = parentMatrix
                 this.setTransform(
-                    ((matrix.a * a) + (matrix.b * c)) * pixelRatio,
-                    ((matrix.a * b) + (matrix.b * d)) * pixelRatio,
-                    ((matrix.c * a) + (matrix.d * c)) * pixelRatio,
-                    ((matrix.c * b) + (matrix.d * d)) * pixelRatio,
-                    (((matrix.e * a) + (matrix.f * c) + e)) * pixelRatio,
-                    (((matrix.e * b) + (matrix.f * d) + f)) * pixelRatio
+                    w.a = ((matrix.a * a) + (matrix.b * c)) * pixelRatio,
+                    w.b = ((matrix.a * b) + (matrix.b * d)) * pixelRatio,
+                    w.c = ((matrix.c * a) + (matrix.d * c)) * pixelRatio,
+                    w.d = ((matrix.c * b) + (matrix.d * d)) * pixelRatio,
+                    w.e = (((matrix.e * a) + (matrix.f * c) + e)) * pixelRatio,
+                    w.f = (((matrix.e * b) + (matrix.f * d) + f)) * pixelRatio
                 )
             }
 
         } else {
 
             this.setTransform(
-                matrix.a * pixelRatio,
-                matrix.b * pixelRatio,
-                matrix.c * pixelRatio,
-                matrix.d * pixelRatio,
-                matrix.e * pixelRatio,
-                matrix.f * pixelRatio
+                w.a = matrix.a * pixelRatio,
+                w.b = matrix.b * pixelRatio,
+                w.c = matrix.c * pixelRatio,
+                w.d = matrix.d * pixelRatio,
+                w.e = matrix.e * pixelRatio,
+                w.f = matrix.f * pixelRatio
             )
         }
     }
 
-    public useSameTransform(canvas: ILeaferCanvas): void {
-        this.setTransform(canvas.getTransform())
-    }
-
     public setStroke(color: string | object, strokeWidth: number, options?: ICanvasStrokeOptions): void {
         if (strokeWidth) this.strokeWidth = strokeWidth
         if (color) this.strokeStyle = color
@@ -152,12 +150,12 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     }
 
     public saveBlendMode(blendMode: string): void {
-        this.savedblendMode = this.blendMode
+        this.savedBlendMode = this.blendMode
         this.blendMode = blendMode
     }
 
     public restoreBlendMode(): void {
-        this.blendMode = this.savedblendMode
+        this.blendMode = this.savedBlendMode
     }
 
     public hitFill(point: IPointData, fillRule?: IWindingRule): boolean {
@@ -193,7 +191,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         } else {
             this.drawImage(canvas.view as HTMLCanvasElement, 0, 0)
         }
-        if (blendMode) this.blendMode = 'normal'
+        if (blendMode) this.blendMode = 'source-over'
     }
 
     public copyWorldToInner(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toInnerBounds: IBoundsData, blendMode?: string): void {
@@ -207,7 +205,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
             const { pixelRatio } = this
             this.drawImage(canvas.view as HTMLCanvasElement, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height)
         }
-        if (blendMode) this.blendMode = 'normal'
+        if (blendMode) this.blendMode = 'source-over'
     }
 
     public useMask(maskCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void {
@@ -219,7 +217,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         this.fillStyle = color
         temp.copy(bounds).scale(this.pixelRatio)
         this.fillRect(temp.x, temp.y, temp.width, temp.height)
-        if (blendMode) this.blendMode = 'normal'
+        if (blendMode) this.blendMode = 'source-over'
     }
 
     public strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
@@ -227,7 +225,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         this.strokeStyle = color
         temp.copy(bounds).scale(this.pixelRatio)
         this.strokeRect(temp.x, temp.y, temp.width, temp.height)
-        if (blendMode) this.blendMode = 'normal'
+        if (blendMode) this.blendMode = 'source-over'
     }
 
     public clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
@@ -258,14 +256,19 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     }
 
     // 需要有 manager变量
-    public getSameCanvas(useSameTransform?: boolean): ILeaferCanvas {
+    public getSameCanvas(useSameWorldTransform?: boolean): ILeaferCanvas {
         const { width, height, pixelRatio } = this
 
         const options = { width, height, pixelRatio }
         const canvas = this.manager ? this.manager.get(options) : Creator.canvas(options)
 
         canvas.save()
-        if (useSameTransform) canvas.useSameTransform(this)
+
+        if (useSameWorldTransform) {
+            const w = this.worldTransform
+            canvas.setTransform(w.a, w.b, w.c, w.d, w.e, w.f)
+        }
+
         return canvas
     }