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

path canvas fixes (make sure there's no accidental styling)

Browse Source
This commit is contained in:
Mourner 2011-06-22 18:34:26 +03:00
parent 8cdb7069e1
commit d999ab1d01
2 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/leaflet.js vendored
View File

@ -71,10 +71,10 @@ L.Path=L.Browser.svg||!L.Browser.vml?L.Path:L.Path.extend({statics:{VML:!0,CLIP_
"leaflet-vml-container",this._map._panes.overlayPane.appendChild(this._map._pathRoot),this._map.on("moveend",this._updateViewport,this),this._updateViewport()},_initPath:function(){this._container=this._createElement("shape");this._container.className+=" leaflet-vml-shape"+(this.options.clickable?" leaflet-clickable":"");this._container.coordsize="1 1";this._path=this._createElement("path");this._container.appendChild(this._path);this._map._pathRoot.appendChild(this._container)},_initStyle:function(){this.options.stroke?
(this._stroke=this._createElement("stroke"),this._stroke.endcap="round",this._container.appendChild(this._stroke)):this._container.stroked=!1;this.options.fill?(this._container.filled=!0,this._fill=this._createElement("fill"),this._container.appendChild(this._fill)):this._container.filled=!1;this._updateStyle()},_updateStyle:function(){if(this.options.stroke)this._stroke.weight=this.options.weight+"px",this._stroke.color=this.options.color,this._stroke.opacity=this.options.opacity;if(this.options.fill)this._fill.color=
this.options.fillColor||this.options.color,this._fill.opacity=this.options.fillOpacity},_updatePath:function(){this._container.style.display="none";this._path.v=this.getPathString()+" ";this._container.style.display=""}});L.Browser.canvas=function(){return!!document.createElement("canvas").getContext}();
L.Path=L.Path.SVG&&!window.L_PREFER_CANVAS||!L.Browser.canvas?L.Path:L.Path.extend({statics:{CANVAS:!0,SVG:!1},options:{updateOnMoveEnd:!0},_initElements:function(){this._initRoot()},_initRoot:function(){var a=this._map._pathRoot;if(!a)a=this._map._pathRoot=document.createElement("canvas"),this._map._panes.overlayPane.appendChild(a),this._map.on("moveend",this._updateCanvasViewport,this),this._updateCanvasViewport();this._ctx=a.getContext("2d")},_updateStyle:function(){this._ctx.lineCap="round";this._ctx.lineJoin=
"round";if(this.options.stroke)this._ctx.lineWidth=this.options.weight,this._ctx.strokeStyle=this.options.color;if(this.options.fill)this._ctx.fillStyle=this.options.fillColor||this.options.color},_drawPath:function(){var a,b,c,d,e,f;this._ctx.beginPath();a=0;for(c=this._parts.length;a<c;a++){b=0;for(d=this._parts[a].length;b<d;b++)e=this._parts[a][b],f=(b===0?"move":"line")+"To",this._ctx[f](e.x,e.y);this instanceof L.Polygon&&this._ctx.closePath()}},_updatePath:function(){this._drawPath();this._updateStyle();
if(this.options.fill)this._ctx.globalAlpha=this.options.fillOpacity,this._ctx.fill();if(this.options.stroke)this._ctx.globalAlpha=this.options.opacity,this._ctx.stroke()},_updateCanvasViewport:function(){this._updateViewport();var a=this._map._pathViewport,b=a.min,a=a.max.subtract(b),c=this._map._pathRoot;L.DomUtil.setPosition(c,b);c.width=a.x;c.height=a.y;c.getContext("2d").translate(-b.x,-b.y)},_initEvents:function(){if(this.options.clickable)this._map.on("click",this._onClick,this)},_onClick:function(a){this._containsPoint(a.layerPoint)&&
this.fire("click",a)}});L.Polyline=L.Path.extend({initialize:function(a,b){L.Path.prototype.initialize.call(this,b);this._latlngs=a},options:{smoothFactor:1,noClip:!1,updateOnMoveEnd:!0},projectLatlngs:function(){this._originalPoints=[];for(var a=0,b=this._latlngs.length;a<b;a++)this._originalPoints[a]=this._map.latLngToLayerPoint(this._latlngs[a])},getPathString:function(){for(var a=0,b=this._parts.length,c="";a<b;a++)c+=this._getPathPartStr(this._parts[a]);return c},getLatLngs:function(){return this._latlngs},setLatLngs:function(a){this._latlngs=
L.Path=L.Path.SVG&&!window.L_PREFER_CANVAS||!L.Browser.canvas?L.Path:L.Path.extend({statics:{CANVAS:!0,SVG:!1},options:{updateOnMoveEnd:!0},_initElements:function(){this._initRoot()},_initRoot:function(){var a=this._map._pathRoot,b=this._map._canvasCtx;if(!a)a=this._map._pathRoot=document.createElement("canvas"),b=this._map._canvasCtx=a.getContext("2d"),b.lineCap="round",b.lineJoin="round",this._map._panes.overlayPane.appendChild(a),this._map.on("moveend",this._updateCanvasViewport,this),this._updateCanvasViewport();
this._ctx=b},_updateStyle:function(){if(this.options.stroke)this._ctx.lineWidth=this.options.weight,this._ctx.strokeStyle=this.options.color;if(this.options.fill)this._ctx.fillStyle=this.options.fillColor||this.options.color},_drawPath:function(){var a,b,c,d,e,f;this._ctx.beginPath();a=0;for(c=this._parts.length;a<c;a++){b=0;for(d=this._parts[a].length;b<d;b++)e=this._parts[a][b],f=(b===0?"move":"line")+"To",this._ctx[f](e.x,e.y);this instanceof L.Polygon&&this._ctx.closePath()}},_updatePath:function(){this._drawPath();
this._ctx.save();this._updateStyle();var a=this.options.opacity,b=this.options.fillOpacity;if(this.options.fill){if(b<1)this._ctx.globalAlpha=b;this._ctx.fill()}if(this.options.stroke){if(a<1)this._ctx.globalAlpha=a;this._ctx.stroke()}this._ctx.restore()},_updateCanvasViewport:function(){this._updateViewport();var a=this._map._pathViewport,b=a.min,a=a.max.subtract(b),c=this._map._pathRoot;L.DomUtil.setPosition(c,b);c.width=a.x;c.height=a.y;c.getContext("2d").translate(-b.x,-b.y)},_initEvents:function(){if(this.options.clickable)this._map.on("click",
this._onClick,this)},_onClick:function(a){this._containsPoint(a.layerPoint)&&this.fire("click",a)}});L.Polyline=L.Path.extend({initialize:function(a,b){L.Path.prototype.initialize.call(this,b);this._latlngs=a},options:{smoothFactor:1,noClip:!1,updateOnMoveEnd:!0},projectLatlngs:function(){this._originalPoints=[];for(var a=0,b=this._latlngs.length;a<b;a++)this._originalPoints[a]=this._map.latLngToLayerPoint(this._latlngs[a])},getPathString:function(){for(var a=0,b=this._parts.length,c="";a<b;a++)c+=this._getPathPartStr(this._parts[a]);return c},getLatLngs:function(){return this._latlngs},setLatLngs:function(a){this._latlngs=
a;this._redraw();return this},addLatLng:function(a){this._latlngs.push(a);this._redraw();return this},spliceLatLngs:function(){var a=[].splice.apply(this._latlngs,arguments);this._redraw();return a},_getPathPartStr:function(a){for(var b=L.Path.VML,c=0,d=a.length,e="",f;c<d;c++)f=a[c],b&&f._round(),e+=(c?"L":"M")+f.x+" "+f.y;return e},_clipPoints:function(){var a=this._originalPoints,b=a.length,c,d,e;if(this.options.noClip)this._parts=[a];else{var f=this._parts=[],g=this._map._pathViewport,h=L.LineUtil;
for(d=c=0;c<b-1;c++)if(e=h.clipSegment(a[c],a[c+1],g,c))if(f[d]=f[d]||[],f[d].push(e[0]),e[1]!=a[c+1]||c==b-2)f[d].push(e[1]),d++}},_simplifyPoints:function(){for(var a=this._parts,b=L.LineUtil,c=0,d=a.length;c<d;c++)a[c]=b.simplify(a[c],this.options.smoothFactor)},_updatePath:function(){this._clipPoints();this._simplifyPoints();L.Path.prototype._updatePath.call(this)}});L.Polyline.include(!L.Path.CANVAS?{}:{_containsPoint:function(a,b){var c,d,e,f,g,h,j=this.options.weight/2;L.Browser.touch&&(j+=10);c=0;for(f=this._parts.length;c<f;c++){h=this._parts[c];d=0;g=h.length;for(e=g-1;d<g;e=d++)if(b||d!==0)if(e=L.LineUtil.pointToSegmentDistance(a,h[e],h[d]),e<=j)return!0}return!1}});L.Polygon=L.Polyline.extend({options:{fill:!0},initialize:function(a,b){L.Polyline.prototype.initialize.call(this,a,b);if(a[0]instanceof Array)this._latlngs=a[0],this._holes=a.slice(1)},projectLatlngs:function(){L.Polyline.prototype.projectLatlngs.call(this);this._holePoints=[];if(this._holes)for(var a=0,b=this._holes.length;a<b;a++){this._holePoints[a]=[];for(var c=0,d=this._holes[a].length;c<d;c++)this._holePoints[a][c]=this._map.latLngToLayerPoint(this._holes[a][c])}},_clipPoints:function(){var a=
[];this._parts=[this._originalPoints].concat(this._holePoints);if(!this.options.noClip){for(var b=0,c=this._parts.length;b<c;b++){var d=L.PolyUtil.clipPolygon(this._parts[b],this._map._pathViewport);d.length&&a.push(d)}this._parts=a}},_getPathPartStr:function(a){return L.Polyline.prototype._getPathPartStr.call(this,a)+(L.Browser.svg?"z":"x")}});L.Polygon.include(!L.Path.CANVAS?{}:{_containsPoint:function(a){var b=!1,c,d,e,f,g,h,j;if(L.Polyline.prototype._containsPoint.call(this,a,!0))return!0;f=0;for(h=this._parts.length;f<h;f++){c=this._parts[f];g=0;j=c.length;for(e=j-1;g<j;e=g++)d=c[g],e=c[e],d.y>a.y!=e.y>a.y&&a.x<(e.x-d.x)*(a.y-d.y)/(e.y-d.y)+d.x&&(b=!b)}return b}});(function(){function a(a){return L.FeatureGroup.extend({initialize:function(c,d){this._layers={};for(var e=0,f=c.length;e<f;e++)this.addLayer(new a(c[e],d))},setStyle:function(a){for(var b in this._layers)this._layers.hasOwnProperty(b)&&this._layers[b].setStyle&&this._layers[b].setStyle(a)}})}L.MultiPolyline=a(L.Polyline);L.MultiPolygon=a(L.Polygon)})();L.Circle=L.Path.extend({initialize:function(a,b,c){L.Path.prototype.initialize.call(this,c);this._latlng=a;this._mRadius=b},options:{fill:!0},setLatLng:function(a){this._latlng=a;this._redraw();return this},setRadius:function(a){this._mRadius=a;this._redraw();return this},projectLatlngs:function(){var a=this._map.options.scale(this._map._zoom);this._point=this._map.latLngToLayerPoint(this._latlng);this._radius=this._mRadius/40075017*a},getPathString:function(){var a=this._point,b=this._radius;return L.Browser.svg?

28
src/layer/vector/canvas/Path.Canvas.js
View File

@ -22,23 +22,26 @@ L.Path = (L.Path.SVG && !window.L_PREFER_CANVAS) || !L.Browser.canvas ? L.Path :
},
_initRoot: function() {
var root = this._map._pathRoot;
var root = this._map._pathRoot,
ctx = this._map._canvasCtx;
if (!root) {
root = this._map._pathRoot = document.createElement("canvas");
ctx = this._map._canvasCtx = root.getContext('2d');
ctx.lineCap = "round";
ctx.lineJoin = "round";
this._map._panes.overlayPane.appendChild(root);
this._map.on('moveend', this._updateCanvasViewport, this);
this._updateCanvasViewport();
}
this._ctx = root.getContext('2d');
this._ctx = ctx;
},
_updateStyle: function() {
this._ctx.lineCap = "round";
this._ctx.lineJoin = "round";
if (this.options.stroke) {
this._ctx.lineWidth = this.options.weight;
this._ctx.strokeStyle = this.options.color;
@ -70,18 +73,29 @@ L.Path = (L.Path.SVG && !window.L_PREFER_CANVAS) || !L.Browser.canvas ? L.Path :
_updatePath: function() {
this._drawPath();
this._ctx.save();
this._updateStyle();
var opacity = this.options.opacity,
fillOpacity = this.options.fillOpacity;
if (this.options.fill) {
this._ctx.globalAlpha = this.options.fillOpacity;
if (fillOpacity < 1) {
this._ctx.globalAlpha = fillOpacity;
}
this._ctx.fill();
}
if (this.options.stroke) {
this._ctx.globalAlpha = this.options.opacity;
if (opacity < 1) {
this._ctx.globalAlpha = opacity;
}
this._ctx.stroke();
}
this._ctx.restore();
/*
* TODO not sure if possible to implement, but a great optimization would be to do
* 1 fill/stroke for all features with equal style instead of 1 for each feature