fix: rect 设置radius时，图形画不出来

antvis · Mar 5, 2021 · 10666e8 · 10666e8
1 parent 6a33051
commit 10666e8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/graphic/engine/shape/rect.js b/src/graphic/engine/shape/rect.js
@@ -59,7 +59,7 @@ class Rect extends Shape {
     if (!radius || !(width * height)) {
       context.rect(x, y, width, height);
     } else {
-      this.createRadiusPath(context, x, y, width, radius);
+      this.createRadiusPath(context, x, y, width, height, radius);
     }
   }
 

diff --git a/test/unit/graphic/shape/rect-spec.js b/test/unit/graphic/shape/rect-spec.js
@@ -10,7 +10,8 @@ describe('Rect', function() {
   const canvas = new Canvas({
     el: 'canvas-rect',
     width: 200,
-    height: 200
+    height: 200,
+    pixelRatio: 1
   });
   const rect = new Rect({
     attrs: {
@@ -61,15 +62,35 @@ describe('Rect', function() {
         y: 10,
         height: 20,
         width: 80,
-        radius: [ 3, 0, 5 ],
+        radius: [ 4, 0, 5 ],
         lineWidth: 1,
         fill: '#1890FF',
         strokeStyle: '#000'
       }
     });
     canvas.add(rect);
+
+    canvas.set('animateHandler', false);
     canvas.draw();
+
+
+    const context = canvas.get('context');
+    // 第一个image圆角区域
+    const imageData1 = context.getImageData(10, 10, 1, 1).data;
+    // 第二个image圆角区域
+    const imageData2 = context.getImageData(89, 10, 1, 1).data;
+
+
     expect(canvas.get('children').length).to.equal(1);
+    expect(imageData1[0]).to.equal(0);
+    expect(imageData1[1]).to.equal(0);
+    expect(imageData1[2]).to.equal(0);
+    expect(imageData1[3]).to.equal(0);
+
+    expect(imageData2[0]).not.equal(0);
+    expect(imageData2[1]).not.equal(0);
+    expect(imageData2[2]).not.equal(0);
+    expect(imageData2[3]).not.equal(0);
     rect.destroy();
     // document.body.removeChild(dom);
   });