Fix zero length arc draw in VML

pissang · pissang · commit 0aff315657be · 2016-05-19T14:15:06.000+08:00
diff --git a/src/vml/graphic.js b/src/vml/graphic.js
@@ -356,11 +356,32 @@ if (!require('../core/env').canvasSupported) {
                     var y1 = cy + sin(endAngle) * ry;
 
                     var type = clockwise ? ' wa ' : ' at ';
-                    // IE won't render arches drawn counter clockwise if x0 == x1.
-                    if (Math.abs(x0 - x1) < 1e-10 && Math.abs(endAngle - startAngle) > 1e-2 && clockwise) {
-                        // Offset x0 by 1/80 of a pixel. Use something
-                        // that can be represented in binary
-                        x0 += 270 / Z;
+                    if (Math.abs(x0 - x1) < 1e-10) {
+                        // IE won't render arches drawn counter clockwise if x0 == x1.
+                        if (Math.abs(endAngle - startAngle) > 1e-2) {
+                            // Offset x0 by 1/80 of a pixel. Use something
+                            // that can be represented in binary
+                            if (clockwise) {
+                                x0 += 270 / Z;
+                            }
+                        }
+                        else {
+                            // Avoid case draw full circle
+                            if (Math.abs(y0 - cy) < 1e-10) {
+                                if ((clockwise && x0 < cx) || (!clockwise && x0 > cx)) {
+                                    y1 -= 270 / Z;
+                                }
+                                else {
+                                    y1 += 270 / Z;
+                                }
+                            }
+                            else if ((clockwise && y0 < cy) || (!clockwise && y0 > cy)) {
+                                x1 += 270 / Z;
+                            }
+                            else {
+                                x1 -= 270 / Z;
+                            }
+                        }
                     }
                     str.push(
                         type,
@@ -426,6 +447,7 @@ if (!require('../core/env').canvasSupported) {
                 }
             }
         }
+
         return str.join('');
     };
 
diff --git a/test/sector.html b/test/sector.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <script type="text/javascript" src="esl.js"></script>
+</head>
+<body>
+    <script type="text/javascript">
+    require.config({
+        packages: [
+            {
+                name: 'zrender',
+                location: '../src',
+                main: 'zrender'
+            }
+        ]
+    });
+
+    require(['zrender', 'zrender/graphic/shape/Sector', 'zrender/vml/vml'], function(zrender, SectorShape){
+        // 初始化zrender
+        var zr = zrender.init(document.getElementById('main'));
+
+        zr.add(new SectorShape({
+            position: [100, 100],
+            scale: [1, 1],
+            style: {
+                stroke: 'black'
+            },
+            shape: {
+                startAngle: -Math.PI / 2,
+                endAngle: -Math.PI / 2,
+                r0: 50,
+                r: 100
+            }
+        }));
+
+        zr.add(new SectorShape({
+            position: [100, 100],
+            scale: [1, 1],
+            style: {
+                stroke: 'black'
+            },
+            shape: {
+                startAngle: 0,
+                endAngle: 0,
+                r0: 50,
+                r: 100
+            }
+        }));
+
+        zr.add(new SectorShape({
+            position: [100, 100],
+            scale: [1, 1],
+            style: {
+                stroke: 'black'
+            },
+            shape: {
+                startAngle: Math.PI / 2,
+                endAngle: Math.PI / 2,
+                r0: 50,
+                r: 100
+            }
+        }));
+
+        zr.add(new SectorShape({
+            position: [100, 100],
+            scale: [1, 1],
+            style: {
+                stroke: 'black'
+            },
+            shape: {
+                startAngle: Math.PI,
+                endAngle: Math.PI,
+                r0: 50,
+                r: 100
+            }
+        }));
+    });
+    </script>
+    <div id="main" style="width:1000px;height:600px;"></div>
+</body>
+</html>
