cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Canvas: call ctx.setLineDash in _fillStroke (#5454)

Browse Source 
* Canvas: call ctx.setLineDash in _fillStroke

This make dashArray working properly for cirles.

fix #5182

* Debug: add dashed circle example

* Debug: add simple example reproducing #5182
This commit is contained in:
Guillaume P 2017-04-20 12:41:26 +02:00 committed by Per Liedman
parent ff72181b52
commit ac05f68a39
3 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
debug/vector/inherit-dashArray.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script>
var map = L.map('map', {
center: [20, 20],
zoom: 3,
preferCanvas: true
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 1,
maxZoom: 17,
label: 'open street map'
}).addTo(map);
var points = [
[0, 0],
[0, 42],
[42, 42],
[0, 0]
];
L.polygon([points, []], {dashArray: '5, 5'}).addTo(map);
L.circleMarker([42, 0], {color: 'red'}).addTo(map);
</script>
</body>
</html>

8
debug/vector/vector-canvas.html
View File

@ -89,6 +89,14 @@
polygon.bindPopup('I am a polygon');
var circleMarker2 = new L.CircleMarker([25.5, 0], {
dashArray: '5, 5',
fillColor: 'red',
color: 'green',
renderer: canvas
});
group.addLayer(circleMarker2);
map.addLayer(group);
</script>

7
src/layer/vector/Canvas.js
View File

@ -271,10 +271,6 @@ export var Canvas = Renderer.extend({
ctx.beginPath();
if (ctx.setLineDash) {
ctx.setLineDash(layer.options && layer.options._dashArray || []);
}
for (i = 0; i < len; i++) {
for (j = 0, len2 = parts[i].length; j < len2; j++) {
p = parts[i][j];
@ -326,6 +322,9 @@ export var Canvas = Renderer.extend({
}
if (options.stroke && options.weight !== 0) {
if (ctx.setLineDash) {
ctx.setLineDash(layer.options && layer.options._dashArray || []);
}
ctx.globalAlpha = options.opacity;
ctx.lineWidth = options.weight;
ctx.strokeStyle = options.color;