fix: 修复rect radius大于宽高时，图形绘制不正确

antvis · May 27, 2020 · 558fe91 · 558fe91
1 parent 1735297
commit 558fe91
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 4 deletions.
diff --git a/src/graphic/shape/rect.js b/src/graphic/shape/rect.js
@@ -1,6 +1,22 @@
 const Util = require('../../util/common');
 const Shape = require('../shape');
 
+// 为了处理radius 大于 width 或 height 的场景
+function parseRadius(radius, width, height) {
+  radius = Util.parsePadding(radius);
+  // 都为0
+  if (!radius[0] && !radius[1] && !radius[2] && !radius[3]) {
+    return radius;
+  }
+  const minWidth = Math.max(radius[0] + radius[1], radius[2] + radius[3]);
+  const minHeight = Math.max(radius[0] + radius[3], radius[1] + radius[2]);
+  const scale = Math.min(width / minWidth, height / minHeight);
+  if (scale < 1) {
+    return radius.map(r => r * scale);
+  }
+  return radius;
+}
+
 class Rect extends Shape {
   _initProperties() {
     super._initProperties();
@@ -23,14 +39,13 @@ class Rect extends Shape {
   createPath(context) {
     const self = this;
     const attrs = self.get('attrs');
-    const { x, y, width, height } = attrs;
+    let { x, y, width, height, radius } = attrs;
 
     context.beginPath();
-    let radius = attrs.radius;
     if (!radius || !(width * height)) {
       context.rect(x, y, width, height);
     } else {
-      radius = Util.parsePadding(radius);
+      radius = parseRadius(radius, width, height);
       context.moveTo(x + radius[0], y);
       context.lineTo(x + width - radius[1], y);
       context.arc(x + width - radius[1], y + radius[1], radius[1], -Math.PI / 2, 0, false);

diff --git a/test/unit/graphic/shape/rect-spec.js b/test/unit/graphic/shape/rect-spec.js
@@ -70,7 +70,29 @@ describe('Rect', function() {
     canvas.add(rect);
     canvas.draw();
     expect(canvas.get('children').length).to.equal(1);
-    document.body.removeChild(dom);
+    rect.destroy();
+    // document.body.removeChild(dom);
+  });
+
+  it('rect radius greater than width and height', function() {
+    const rect = new Rect({
+      attrs: {
+        x: 10,
+        y: 10,
+        height: 20,
+        width: 80,
+        radius: [ 40, 40, 0, 0 ],
+        lineWidth: 1,
+        fill: '#1890FF',
+        strokeStyle: '#000'
+      }
+    });
+
+    canvas.add(rect);
+    canvas.draw();
+    expect(canvas.get('children').length).to.equal(1);
+    // rect.destroy();
+    // document.body.removeChild(dom);
   });
 });