@leafer/canvas 1.0.9 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "@leafer/canvas",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,15 +22,15 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/file": "1.0.9",
-    "@leafer/list": "1.0.9",
-    "@leafer/math": "1.0.9",
-    "@leafer/data": "1.0.9",
-    "@leafer/path": "1.0.9",
-    "@leafer/debug": "1.0.9",
-    "@leafer/platform": "1.0.9"
+    "@leafer/file": "1.1.0",
+    "@leafer/list": "1.1.0",
+    "@leafer/math": "1.1.0",
+    "@leafer/data": "1.1.0",
+    "@leafer/path": "1.1.0",
+    "@leafer/debug": "1.1.0",
+    "@leafer/platform": "1.1.0"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.9"
+    "@leafer/interface": "1.1.0"
   }
 }

package/src/LeaferCanvasBase.ts

@@ -1,4 +1,4 @@
-import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ILeaferCanvasConfig, IExportOptions, IMatrixData, IBoundsData, IAutoBounds, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule, IBlendMode, IExportImageType, IExportFileType, IBlob, ICursorType, ILeaferCanvasView, IRadiusPointData } from '@leafer/interface'
+import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ILeaferCanvasConfig, IExportOptions, IMatrixData, IBoundsData, IAutoBounds, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule, IBlendMode, IExportImageType, IExportFileType, IBlob, ICursorType, ILeaferCanvasView, IRadiusPointData, IObject } from '@leafer/interface'
 import { Bounds, tempBounds, BoundsHelper, MatrixHelper, IncrementId } from '@leafer/math'
 import { Creator, Platform } from '@leafer/platform'
 import { DataHelper } from '@leafer/data'
@@ -95,8 +95,9 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
             takeCanvas.copyWorld(this)
         }
 
-        DataHelper.copyAttrs(this.size, size, canvasSizeAttrs)
-        this.size.pixelRatio || (this.size.pixelRatio = 1)
+        const s = this.size as IObject
+        DataHelper.copyAttrs(s, size, canvasSizeAttrs)
+        canvasSizeAttrs.forEach(key => s[key] || (s[key] = 1)) // fix: width = 0 or height = 0
 
         this.bounds = new Bounds(0, 0, this.width, this.height)
 
@@ -239,6 +240,20 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
         if (!onlyResetTransform) this.useWorldTransform() // restore world transform
     }
 
+    public useGrayscaleAlpha(bounds: IBoundsData): void { // 先实现功能，后期需通过 shader 优化性能
+        this.setTempBounds(bounds, true, true)
+
+        let alpha: number, pixel: number
+        const { context } = this, imageData = context.getImageData(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height), { data } = imageData
+
+        for (let i = 0, len = data.length; i < len; i += 4) {
+            pixel = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114
+            if (alpha = data[i + 3]) data[i + 3] = alpha === 255 ? pixel : alpha * (pixel / 255)
+        }
+
+        context.putImageData(imageData, tempBounds.x, tempBounds.y)
+    }
+
     public useMask(maskCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void {
         this.copyWorld(maskCanvas, fromBounds, toBounds, 'destination-in')
     }
@@ -250,7 +265,7 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     public fillWorld(bounds: IBoundsData, color: string | object, blendMode?: IBlendMode): void {
         if (blendMode) this.blendMode = blendMode
         this.fillStyle = color
-        tempBounds.set(bounds).scale(this.pixelRatio)
+        this.setTempBounds(bounds)
         this.fillRect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height)
         if (blendMode) this.blendMode = 'source-over'
     }
@@ -258,21 +273,19 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     public strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: IBlendMode): void {
         if (blendMode) this.blendMode = blendMode
         this.strokeStyle = color
-        tempBounds.set(bounds).scale(this.pixelRatio)
+        this.setTempBounds(bounds)
         this.strokeRect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height)
         if (blendMode) this.blendMode = 'source-over'
     }
 
     public clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
-        tempBounds.set(bounds).scale(this.pixelRatio)
-        if (ceilPixel) tempBounds.ceil()
+        this.setTempBounds(bounds, ceilPixel)
         this.clearRect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height)
     }
 
     public clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
         this.beginPath()
-        tempBounds.set(bounds).scale(this.pixelRatio)
-        if (ceilPixel) tempBounds.ceil()
+        this.setTempBounds(bounds, ceilPixel)
         this.rect(tempBounds.x, tempBounds.y, tempBounds.width, tempBounds.height)
         this.clip()
 
@@ -286,6 +299,13 @@ export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
 
     // other
 
+    protected setTempBounds(bounds: IBoundsData, ceil?: boolean, intersect?: boolean): void {
+        tempBounds.set(bounds)
+        if (intersect) tempBounds.intersect(this.bounds)
+        tempBounds.scale(this.pixelRatio)
+        if (ceil) tempBounds.ceil()
+    }
+
     public isSameSize(size: IScreenSizeData): boolean {
         return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio
     }

package/types/index.d.ts

@@ -130,6 +130,7 @@ declare class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     copyWorld(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: IBlendMode): void;
     copyWorldToInner(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toInnerBounds: IBoundsData, blendMode?: IBlendMode): void;
     copyWorldByReset(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: IBlendMode, onlyResetTransform?: boolean): void;
+    useGrayscaleAlpha(bounds: IBoundsData): void;
     useMask(maskCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void;
     useEraser(eraserCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void;
     fillWorld(bounds: IBoundsData, color: string | object, blendMode?: IBlendMode): void;
@@ -137,6 +138,7 @@ declare class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
     clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void;
     clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void;
     clear(): void;
+    protected setTempBounds(bounds: IBoundsData, ceil?: boolean, intersect?: boolean): void;
     isSameSize(size: IScreenSizeData): boolean;
     getSameCanvas(useSameWorldTransform?: boolean, useSameSmooth?: boolean): ILeaferCanvas;
     recycle(clearBounds?: IBoundsData): void;