manubb / Leaflet.PixiOverlay

Bring Pixi.js power to Leaflet maps
MIT License
474 stars 84 forks source link

A small circle looks like an octagon #22

Closed dh-shin closed 5 years ago

dh-shin commented 5 years ago

Hello,

First of all, thank you for making a good library. I'm using this library well.

But I have one issue. In your basic demo, (https://manubb.github.io/Leaflet.PixiOverlay/leaflet-quickstart.html)

I want to make the red circle smaller like the node circles of OSM. (https://www.openstreetmap.org/node/25472466#map=19/51.50642/-0.11257)

I changed the radius of the circle to 0.5 (in leaflet-quickstart.html) and it looked like an octagon, not a smooth circle. So I solved this problem temporarily by using circle-shaped markers.

Is there a way to draw a small, smooth circle through pixi.graphics?

Thanks

manubb commented 5 years ago

Hello. You can use the following workaround/trick as pixi does not allow to set the number of edges of a circle:

        var circleRadius = 0.5;
       ...
       ...
            var scaleFactor = 10; // <---
            circle.clear();
            circle.scale.set(1 / scaleFactor); // <---
        circle.lineStyle(3 / scale, 0xff0000, 1);
        circle.beginFill(0xff0033, 0.5);
        circle.x = projectedCenter.x;
        circle.y = projectedCenter.y;
            circle.drawCircle(0, 0, scaleFactor  * circleRadius); // <---
            circle.endFill();
            ...
dh-shin commented 5 years ago

It works perfectly for this problem. I think my understanding of pixi.js was lacking. Thanks for suggesting the good workaround.