fix large ellipse painting, close #1135

maptalks · Jun 18, 2020 · ce98c9e · ce98c9e
1 parent 1f54812
commit ce98c9e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/src/core/Canvas.js b/src/core/Canvas.js
@@ -789,29 +789,35 @@ const Canvas = {
 
 
     //各种图形的绘制方法
-    ellipse(ctx, pt, width, height, lineOpacity, fillOpacity) {
-        function bezierEllipse(x, y, a, b) {
+    ellipse(ctx, pt, width, heightTop, heightBottom, lineOpacity, fillOpacity) {
+        function bezierEllipse(x, y, a, b, b1) {
             const k = 0.5522848,
                 ox = a * k,
-                oy = b * k;
+                oy = b * k,
+                oy1 = b1 * k;
             ctx.moveTo(x - a, y);
             ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
             ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
-            ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
-            ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
+            ctx.bezierCurveTo(x + a, y + oy1, x + ox, y + b1, x, y + b1);
+            ctx.bezierCurveTo(x - ox, y + b1, x - a, y + oy1, x - a, y);
             ctx.closePath();
         }
         ctx.beginPath();
-        if (width === height) {
+        if (width === heightTop && width === heightBottom) {
             ctx.arc(pt.x, pt.y, width, 0, 2 * Math.PI);
         } else if (ctx.ellipse) {
-            ctx.ellipse(pt.x, pt.y, width, height, 0, 0, Math.PI / 180 * 360);
+            if (heightTop !== heightBottom) {
+                ctx.ellipse(pt.x, pt.y, width, heightTop, 0, Math.PI / 180 * 180, Math.PI / 180 * 360, false);
+                ctx.ellipse(pt.x, pt.y, width, heightBottom, 0, 0, Math.PI / 180 * 180, false);
+            } else {
+                ctx.ellipse(pt.x, pt.y, width, heightTop, 0, 0, Math.PI / 180 * 360, false);
+            }
         } else {
             // IE
-            bezierEllipse(pt.x, pt.y, width, height);
+            bezierEllipse(pt.x, pt.y, width, heightTop, heightBottom);
         }
-        Canvas.fillCanvas(ctx, fillOpacity, pt.x - width, pt.y - height);
-        Canvas._stroke(ctx, lineOpacity, pt.x - width, pt.y - height);
+        Canvas.fillCanvas(ctx, fillOpacity, pt.x - width, pt.y - heightTop);
+        Canvas._stroke(ctx, lineOpacity, pt.x - width, pt.y - heightTop);
     },
 
     rectangle(ctx, pt, size, lineOpacity, fillOpacity) {

diff --git a/src/geometry/Circle.js b/src/geometry/Circle.js
@@ -125,9 +125,12 @@ class Circle extends CenterMixin(Polygon) {
         }
         const pcenter = this._getPrjCoordinates();
         const pminmax = minmax.map(c => projection.project(c));
-        const dx = Math.min(Math.abs(pminmax[0].x - pcenter.x), Math.abs(pminmax[1].x - pcenter.x)),
-            dy = Math.min(Math.abs(pminmax[2].y - pcenter.y), Math.abs(pminmax[3].y - pcenter.y));
-        return new Extent(pcenter.sub(dx, dy), pcenter.add(dx, dy));
+        const leftx = pminmax[0].x - pcenter.x;
+        const rightx = pminmax[1].x - pcenter.x;
+        const topy = pminmax[2].y - pcenter.y;
+        const bottomy = pminmax[3].y - pcenter.y;
+
+        return new Extent(pcenter.add(leftx, topy), pcenter.add(rightx, bottomy));
     }
 
     _computeExtent(measurer) {

diff --git a/src/renderer/geometry/VectorRenderer.js b/src/renderer/geometry/VectorRenderer.js
@@ -38,8 +38,8 @@ const el = {
         }
         const pcenter = this._getPrjCoordinates();
         const pt = map._prjToPoint(pcenter, map.getGLZoom());
-        const size = this._getRenderSize();
-        return [pt, size['width'], size['height']];
+        const size = this._getRenderSize(pt);
+        return [pt, ...size];
     },
 
     _paintOn: function () {
@@ -50,13 +50,13 @@ const el = {
         }
     },
 
-    _getRenderSize() {
+    _getRenderSize(pt) {
         const map = this.getMap(),
             z = map.getGLZoom();
         const prjExtent = this._getPrjExtent();
         const pmin = map._prjToPoint(prjExtent.getMin(), z),
             pmax = map._prjToPoint(prjExtent.getMax(), z);
-        return new Size(Math.abs(pmax.x - pmin.x) / 2, Math.abs(pmax.y - pmin.y) / 2);
+        return [Math.abs(pmax.x - pmin.x) / 2, pmax.y - pt.y, pt.y - pmin.y];
     }
 };
 
@@ -86,7 +86,7 @@ Sector.include(el, {
         const map = this.getMap();
         const pt = map._prjToPoint(this._getPrjCoordinates(), map.getGLZoom());
         const size = this._getRenderSize();
-        return [pt, size['width'],
+        return [pt, size[0],
             [this.getStartAngle(), this.getEndAngle()]
         ];
     },

diff --git a/src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.js b/src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.js
@@ -225,7 +225,7 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
             hLineWidth = style['markerLineWidth'] / 2;
         if (markerType === 'ellipse') {
             //ellipse default
-            Canvas.ellipse(ctx, point, width / 2, height / 2, lineOpacity, fillOpacity);
+            Canvas.ellipse(ctx, point, width / 2, height / 2, height / 2, lineOpacity, fillOpacity);
         } else if (markerType === 'cross' || markerType === 'x') {
             for (let j = vectorArray.length - 1; j >= 0; j--) {
                 vectorArray[j]._add(point);