@antv/g-canvas - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

esm/canvas.js

@@ -6,4 +6,4 @@ import { __extends } from "tslib";
 import Group from './group';
+import { each, getPixelRatio, requestAnimationFrame, clearAnimationFrame } from './util/util';
 import { applyAttrsToContext, drawChildren, getMergedRegion, mergeView, checkRefresh, clearChanged } from './util/draw';
-import { getPixelRatio, requestAnimationFrame, clearAnimationFrame } from './util/util';
 var Canvas = /** @class */ (function (_super) {
@@ -57,3 +57,3 @@ __extends(Canvas, _super);
         // 不足 1 的取 1，超出 1 的取整
-        return pixelRatio >= 1 ? Math.floor(pixelRatio) : 1;
+        return pixelRatio >= 1 ? Math.ceil(pixelRatio) : 1;
     };
@@ -175,5 +175,5 @@ Canvas.prototype.getViewRange = function () {
         var context = this.get('context');
+        var refreshElements = this.get('refreshElements');
         var children = this.getChildren();
         var region = this._getRefreshRegion();
-        var refreshElements = this.get('refreshElements');
         // 需要注意可能没有 region 的场景
@@ -204,2 +204,9 @@ // 一般发生在设置了 localRefresh ,在没有图形发生变化的情况下，用户调用了 draw
         }
+        each(refreshElements, function (element) {
+            if (element.get('hasChanged')) {
+                // 在视窗外的 Group 元素会加入到更新队列里，但实际却没有执行 draw() 逻辑，也就没有清除 hasChanged 标记
+                // 即已经重绘完、但 hasChanged 标记没有清除的元素，需要统一清除掉。主要是 Group 存在问题，具体原因待排查
+                element.set('hasChanged', false);
+            }
+        });
         this.set('refreshElements', []);
@@ -206,0 +213,0 @@ };

esm/shape/base.js

@@ -86,2 +86,3 @@ import { __assign, __extends } from "tslib";
             if (!intersectRect(region, bbox)) {
+                // 图形的包围盒与重绘区域不相交时，也需要清除标记
                 this.set('hasChanged', false);
@@ -88,0 +89,0 @@ // 存在多种情形需要更新 cacheCanvasBBox 和 isInview 的判定

esm/shape/path.js

@@ -85,3 +85,4 @@ import { __assign, __extends } from "tslib";
         if (isStroke) {
-            isHit = PathUtil.isPointInStroke(segments, lineWidth, x, y);
+            var length_1 = this.getTotalLength();
+            isHit = PathUtil.isPointInStroke(segments, lineWidth, x, y, length_1);
         }
@@ -88,0 +89,0 @@ if (!isHit && isFill) {

esm/util/draw.js

@@ -76,9 +76,4 @@ import { each, isArray } from '@antv/util';
         if (child.cfg.visible) {
-            // 如果当前图形/分组 refresh = true，说明其子节点存在 changed
-            if (child.cfg.refresh) {
-                if (child.isGroup()) {
-                    checkChildrenRefresh(child.cfg.children, region);
-                }
-            }
-            else if (child.cfg.hasChanged) {
+            // 先判断 hasChanged，因为它的优先级判断应该高于 refresh
+            if (child.cfg.hasChanged) {
                 // 如果节点发生了 change，则需要级联设置子元素的 refresh
@@ -90,2 +85,8 @@ child.cfg.refresh = true;
             }
+            else if (child.cfg.refresh) {
+                // 如果当前图形/分组 refresh = true，说明其子节点存在 changed
+                if (child.isGroup()) {
+                    checkChildrenRefresh(child.cfg.children, region);
+                }
+            }
             else {
@@ -92,0 +93,0 @@ // 这个分支说明此次局部刷新，所有的节点和父元素没有发生变化，仅需要检查包围盒（缓存）是否相交即可

esm/util/path.d.ts

 declare function hasArc(path: any): boolean;
-declare function isPointInStroke(segments: any, lineWidth: any, x: any, y: any): boolean;
+declare function isPointInStroke(segments: any, lineWidth: any, x: any, y: any, length: any): boolean;
 /**
@@ -4,0 +4,0 @@ * 提取出内部的闭合多边形和非闭合的多边形，假设 path 不存在圆弧

esm/util/path.js

@@ -28,3 +28,3 @@ import { __assign } from "tslib";
 }
-function isPointInStroke(segments, lineWidth, x, y) {
+function isPointInStroke(segments, lineWidth, x, y, length) {
     var isHit = false;
@@ -50,3 +50,5 @@ var halfWidth = lineWidth / 2;
             case 'C':
-                var cDistance = CubicUtil.pointDistance(prePoint[0], prePoint[1], params[1], params[2], params[3], params[4], params[5], params[6], x, y);
+                var cDistance = CubicUtil.pointDistance(prePoint[0], // 上一段结束位置, 即 C 的起始点
+                prePoint[1], params[1], // 'C' 的参数，1、2 为第一个控制点，3、4 为第二个控制点，5、6 为结束点
+                params[2], params[3], params[4], params[5], params[6], x, y, length);
                 isHit = cDistance <= lineWidth / 2;
@@ -53,0 +55,0 @@ break;

lib/canvas.js

@@ -8,4 +8,4 @@ "use strict";
 var group_1 = require("./group");
+var util_1 = require("./util/util");
 var draw_1 = require("./util/draw");
-var util_1 = require("./util/util");
 var Canvas = /** @class */ (function (_super) {
@@ -59,3 +59,3 @@ tslib_1.__extends(Canvas, _super);
         // 不足 1 的取 1，超出 1 的取整
-        return pixelRatio >= 1 ? Math.floor(pixelRatio) : 1;
+        return pixelRatio >= 1 ? Math.ceil(pixelRatio) : 1;
     };
@@ -177,5 +177,5 @@ Canvas.prototype.getViewRange = function () {
         var context = this.get('context');
+        var refreshElements = this.get('refreshElements');
         var children = this.getChildren();
         var region = this._getRefreshRegion();
-        var refreshElements = this.get('refreshElements');
         // 需要注意可能没有 region 的场景
@@ -206,2 +206,9 @@ // 一般发生在设置了 localRefresh ,在没有图形发生变化的情况下，用户调用了 draw
         }
+        util_1.each(refreshElements, function (element) {
+            if (element.get('hasChanged')) {
+                // 在视窗外的 Group 元素会加入到更新队列里，但实际却没有执行 draw() 逻辑，也就没有清除 hasChanged 标记
+                // 即已经重绘完、但 hasChanged 标记没有清除的元素，需要统一清除掉。主要是 Group 存在问题，具体原因待排查
+                element.set('hasChanged', false);
+            }
+        });
         this.set('refreshElements', []);
@@ -208,0 +215,0 @@ };

lib/shape/base.js

@@ -88,2 +88,3 @@ "use strict";
             if (!util_1.intersectRect(region, bbox)) {
+                // 图形的包围盒与重绘区域不相交时，也需要清除标记
                 this.set('hasChanged', false);
@@ -90,0 +91,0 @@ // 存在多种情形需要更新 cacheCanvasBBox 和 isInview 的判定

lib/shape/path.js

@@ -87,3 +87,4 @@ "use strict";
         if (isStroke) {
-            isHit = path_1.default.isPointInStroke(segments, lineWidth, x, y);
+            var length_1 = this.getTotalLength();
+            isHit = path_1.default.isPointInStroke(segments, lineWidth, x, y, length_1);
         }
@@ -90,0 +91,0 @@ if (!isHit && isFill) {

lib/util/draw.js

@@ -82,9 +82,4 @@ "use strict";
         if (child.cfg.visible) {
-            // 如果当前图形/分组 refresh = true，说明其子节点存在 changed
-            if (child.cfg.refresh) {
-                if (child.isGroup()) {
-                    checkChildrenRefresh(child.cfg.children, region);
-                }
-            }
-            else if (child.cfg.hasChanged) {
+            // 先判断 hasChanged，因为它的优先级判断应该高于 refresh
+            if (child.cfg.hasChanged) {
                 // 如果节点发生了 change，则需要级联设置子元素的 refresh
@@ -96,2 +91,8 @@ child.cfg.refresh = true;
             }
+            else if (child.cfg.refresh) {
+                // 如果当前图形/分组 refresh = true，说明其子节点存在 changed
+                if (child.isGroup()) {
+                    checkChildrenRefresh(child.cfg.children, region);
+                }
+            }
             else {
@@ -98,0 +99,0 @@ // 这个分支说明此次局部刷新，所有的节点和父元素没有发生变化，仅需要检查包围盒（缓存）是否相交即可

lib/util/path.d.ts

 declare function hasArc(path: any): boolean;
-declare function isPointInStroke(segments: any, lineWidth: any, x: any, y: any): boolean;
+declare function isPointInStroke(segments: any, lineWidth: any, x: any, y: any, length: any): boolean;
 /**
@@ -4,0 +4,0 @@ * 提取出内部的闭合多边形和非闭合的多边形，假设 path 不存在圆弧

lib/util/path.js

@@ -30,3 +30,3 @@ "use strict";
 }
-function isPointInStroke(segments, lineWidth, x, y) {
+function isPointInStroke(segments, lineWidth, x, y, length) {
     var isHit = false;
@@ -52,3 +52,5 @@ var halfWidth = lineWidth / 2;
             case 'C':
-                var cDistance = cubic_1.default.pointDistance(prePoint[0], prePoint[1], params[1], params[2], params[3], params[4], params[5], params[6], x, y);
+                var cDistance = cubic_1.default.pointDistance(prePoint[0], // 上一段结束位置, 即 C 的起始点
+                prePoint[1], params[1], // 'C' 的参数，1、2 为第一个控制点，3、4 为第二个控制点，5、6 为结束点
+                params[2], params[3], params[4], params[5], params[6], x, y, length);
                 isHit = cDistance <= lineWidth / 2;
@@ -55,0 +57,0 @@ break;

package.json

 {
   "name": "@antv/g-canvas",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A canvas library which providing 2d",
@@ -58,4 +58,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@antv/g-base": "^0.5.0",
-    "@antv/g-math": "^0.1.4",
+    "@antv/g-base": "^0.5.1",
+    "@antv/g-math": "^0.1.5",
     "@antv/matrix-util": "^3.1.0-beta.1",
@@ -67,3 +67,3 @@ "@antv/path-util": "~2.0.5",
   "__npminstall_done": false,
-  "gitHead": "589e66aa15f457491ab967aba5e6e13b21e81879"
+  "gitHead": "ba7ecf8b8deac37682414ac0b7fc2c3e903398bd"
 }

No alert changes

Improved metrics

Total package byte prevSize

1462835

increased by0.28%

Lines of code

7938

increased by0.3%

Dependency changes

• Updated@antv/g-base@^0.5.1

• Updated@antv/g-math@^0.1.5