@antv/g-canvas - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

esm/canvas.js

@@ -6,29 +6,5 @@ import { __extends } from "tslib";
 import Group from './group';
-import { drawChildren, getRefreshRegion } from './util/draw';
-import { getPixelRatio, each, requestAnimationFrame, clearAnimationFrame } from './util/util';
+import { drawChildren, getMergedRegion } from './util/draw';
+import { getPixelRatio, requestAnimationFrame, clearAnimationFrame } from './util/util';
 var REFRSH_COUNT = 30; // 局部刷新的元素个数，超过后合并绘图区域
-function getMergedRegion(elements) {
-    if (!elements.length) {
-        return null;
-    }
-    var minXArr = [];
-    var minYArr = [];
-    var maxXArr = [];
-    var maxYArr = [];
-    each(elements, function (el) {
-        var region = getRefreshRegion(el);
-        if (region) {
-            minXArr.push(region.minX);
-            minYArr.push(region.minY);
-            maxXArr.push(region.maxX);
-            maxYArr.push(region.maxY);
-        }
-    });
-    return {
-        minX: Math.min.apply(null, minXArr),
-        minY: Math.min.apply(null, minYArr),
-        maxX: Math.max.apply(null, maxXArr),
-        maxY: Math.max.apply(null, maxYArr),
-    };
-}
 var Canvas = /** @class */ (function (_super) {
@@ -35,0 +11,0 @@ __extends(Canvas, _super);

esm/group.js

@@ -26,4 +26,11 @@ import { __extends } from "tslib";
         if (clip) {
+            context.save();
+            // 将 clip 的属性挂载到 context 上
+            applyAttrsToContext(context, clip);
+            // 绘制 clip 路径
             clip.createPath(context);
+            context.restore();
+            // 裁剪
             context.clip();
+            clip._afterDraw();
         }
@@ -30,0 +37,0 @@ };

esm/shape/base.js

 import { __extends } from "tslib";
 import { AbstractShape } from '@antv/g-base';
 import { isNil, intersectRect } from '../util/util';
-import { applyAttrsToContext, refreshElement } from '../util/draw';
+import { applyAttrsToContext, refreshElement, getMergedRegion } from '../util/draw';
 import * as Shape from './index';
@@ -75,5 +75,11 @@ import Group from '../group';
         if (clip) {
+            context.save();
+            // 将 clip 的属性挂载到 context 上
+            applyAttrsToContext(context, clip);
+            // 绘制 clip 路径
             clip.createPath(context);
+            context.restore();
+            // 裁剪
             context.clip();
-            clip._afterDraw(); // clip 绘制完成后，需要缓存包围盒以及清除标记
+            clip._afterDraw();
         }
@@ -83,5 +89,7 @@ };
     ShapeBase.prototype.draw = function (context, region) {
-        // 如果指定了区域，则同指定区域相交时渲染
+        var clip = this.getClip();
+        // 如果指定了区域，当与指定区域相交时，才会触发渲染
         if (region) {
-            var bbox = this.getCanvasBBox();
+            // 是否相交需要考虑 clip 的包围盒
+            var bbox = clip ? getMergedRegion([this, clip]) : this.getCanvasBBox();
             if (!intersectRect(region, bbox)) {
@@ -88,0 +96,0 @@ return;

esm/util/draw.d.ts

@@ -8,1 +8,2 @@ import { IElement } from '../interfaces';
 export declare function getRefreshRegion(element: any): any;
+export declare function getMergedRegion(elements: any): Region;

esm/util/draw.js

@@ -1,2 +0,2 @@
-import { isArray } from '@antv/util';
+import { each, isArray } from '@antv/util';
 import { parseStyle } from './parse';
@@ -152,2 +152,26 @@ import getArcParams from './arc-params';
 }
+export function getMergedRegion(elements) {
+    if (!elements.length) {
+        return null;
+    }
+    var minXArr = [];
+    var minYArr = [];
+    var maxXArr = [];
+    var maxYArr = [];
+    each(elements, function (el) {
+        var region = getRefreshRegion(el);
+        if (region) {
+            minXArr.push(region.minX);
+            minYArr.push(region.minY);
+            maxXArr.push(region.maxX);
+            maxYArr.push(region.maxY);
+        }
+    });
+    return {
+        minX: Math.min.apply(null, minXArr),
+        minY: Math.min.apply(null, minYArr),
+        maxX: Math.max.apply(null, maxXArr),
+        maxY: Math.max.apply(null, maxYArr),
+    };
+}
 //# sourceMappingURL=draw.js.map

lib/canvas.js

@@ -11,26 +11,2 @@ "use strict";
 var REFRSH_COUNT = 30; // 局部刷新的元素个数，超过后合并绘图区域
-function getMergedRegion(elements) {
-    if (!elements.length) {
-        return null;
-    }
-    var minXArr = [];
-    var minYArr = [];
-    var maxXArr = [];
-    var maxYArr = [];
-    util_1.each(elements, function (el) {
-        var region = draw_1.getRefreshRegion(el);
-        if (region) {
-            minXArr.push(region.minX);
-            minYArr.push(region.minY);
-            maxXArr.push(region.maxX);
-            maxYArr.push(region.maxY);
-        }
-    });
-    return {
-        minX: Math.min.apply(null, minXArr),
-        minY: Math.min.apply(null, minYArr),
-        maxX: Math.max.apply(null, maxXArr),
-        maxY: Math.max.apply(null, maxYArr),
-    };
-}
 var Canvas = /** @class */ (function (_super) {
@@ -130,3 +106,3 @@ tslib_1.__extends(Canvas, _super);
         else {
-            region = getMergedRegion(elements);
+            region = draw_1.getMergedRegion(elements);
             if (region) {
@@ -133,0 +109,0 @@ region.minX = Math.floor(region.minX);

lib/group.js

@@ -28,4 +28,11 @@ "use strict";
         if (clip) {
+            context.save();
+            // 将 clip 的属性挂载到 context 上
+            draw_1.applyAttrsToContext(context, clip);
+            // 绘制 clip 路径
             clip.createPath(context);
+            context.restore();
+            // 裁剪
             context.clip();
+            clip._afterDraw();
         }
@@ -32,0 +39,0 @@ };

lib/shape/base.js

@@ -77,5 +77,11 @@ "use strict";
         if (clip) {
+            context.save();
+            // 将 clip 的属性挂载到 context 上
+            draw_1.applyAttrsToContext(context, clip);
+            // 绘制 clip 路径
             clip.createPath(context);
+            context.restore();
+            // 裁剪
             context.clip();
-            clip._afterDraw(); // clip 绘制完成后，需要缓存包围盒以及清除标记
+            clip._afterDraw();
         }
@@ -85,5 +91,7 @@ };
     ShapeBase.prototype.draw = function (context, region) {
-        // 如果指定了区域，则同指定区域相交时渲染
+        var clip = this.getClip();
+        // 如果指定了区域，当与指定区域相交时，才会触发渲染
         if (region) {
-            var bbox = this.getCanvasBBox();
+            // 是否相交需要考虑 clip 的包围盒
+            var bbox = clip ? draw_1.getMergedRegion([this, clip]) : this.getCanvasBBox();
             if (!util_1.intersectRect(region, bbox)) {
@@ -90,0 +98,0 @@ return;

lib/util/draw.d.ts

@@ -8,1 +8,2 @@ import { IElement } from '../interfaces';
 export declare function getRefreshRegion(element: any): any;
+export declare function getMergedRegion(elements: any): Region;

lib/util/draw.js

@@ -159,2 +159,27 @@ "use strict";
 exports.getRefreshRegion = getRefreshRegion;
+function getMergedRegion(elements) {
+    if (!elements.length) {
+        return null;
+    }
+    var minXArr = [];
+    var minYArr = [];
+    var maxXArr = [];
+    var maxYArr = [];
+    util_1.each(elements, function (el) {
+        var region = getRefreshRegion(el);
+        if (region) {
+            minXArr.push(region.minX);
+            minYArr.push(region.minY);
+            maxXArr.push(region.maxX);
+            maxYArr.push(region.maxY);
+        }
+    });
+    return {
+        minX: Math.min.apply(null, minXArr),
+        minY: Math.min.apply(null, minYArr),
+        maxX: Math.max.apply(null, maxXArr),
+        maxY: Math.max.apply(null, maxYArr),
+    };
+}
+exports.getMergedRegion = getMergedRegion;
 //# sourceMappingURL=draw.js.map

package.json

 {
   "name": "@antv/g-canvas",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A canvas library which providing 2d",
@@ -58,3 +58,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-base": "^0.3.0",
+    "@antv/g-base": "^0.3.1",
     "@antv/g-math": "^0.1.0",
@@ -66,3 +66,3 @@ "@antv/gl-matrix": "~2.7.1",
   "__npminstall_done": false,
-  "gitHead": "935908462d81d31d360754a23911465a89389a52"
+  "gitHead": "f38b08b6e0f757e46cddc3e4dd6ee35c72e26d6e"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1243107

increased by0.25%

Lines of code

6962

increased by0.51%

Dependency changes

• Updated@antv/g-base@^0.3.1