Changed implementation as discussed in first push request.

This commit is contained in:
florian 2011-06-20 20:27:09 +02:00
parent 7d5be23a25
commit f3205aab50
3 changed files with 33 additions and 51 deletions

View File

@ -57,6 +57,7 @@
'layer/vector/Polygon.js', 'layer/vector/Polygon.js',
'layer/vector/MultiPoly.js', 'layer/vector/MultiPoly.js',
'layer/vector/Circle.js', 'layer/vector/Circle.js',
'layer/vector/Circle.Canvas.js',
'layer/vector/CircleMarker.js', 'layer/vector/CircleMarker.js',
'layer/GeoJSON.js', 'layer/GeoJSON.js',

View File

@ -11,8 +11,7 @@ L.Circle = L.Path.extend({
}, },
options: { options: {
fill: true, fill: true
updateOnMoveEnd: true
}, },
setLatLng: function(latlng) { setLatLng: function(latlng) {

View File

@ -1,6 +1,5 @@
/* /*
* Vector rendering for all browsers that support canvas. * Vector rendering for all browsers that support canvas.
* Florian Falkner, General Solutions Steiner GmbH
*/ */
L.Path.Canvas = (function() { L.Path.Canvas = (function() {
@ -8,10 +7,18 @@ L.Path.Canvas = (function() {
})(); })();
L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({
initialize: function(options) {
L.Util.setOptions(this, options);
},
statics: { statics: {
CLIP_PADDING: 0.02 CLIP_PADDING: 0.02
}, },
options : {
updateOnMoveEnd: true
},
_initRoot: function() { _initRoot: function() {
if (!this._map._pathRoot) { if (!this._map._pathRoot) {
this._map._pathRoot = document.createElement("canvas"); this._map._pathRoot = document.createElement("canvas");
@ -31,46 +38,28 @@ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({
//NOOP. //NOOP.
}, },
_hexToRGB : function(h) {
h = (h.charAt(0)=="#") ? h.substring(1,h.length):h;
while (h.length < 6) {
h += h;
}
return parseInt(h.substring(0,2),16) + "," +
parseInt(h.substring(2,4),16) + "," +
parseInt(h.substring(4,6),16)
},
_getStyle : function(color, opacity) {
return "rgba(" + this._hexToRGB(color) +"," + opacity + ")";
},
_updateStyle: function() { _updateStyle: function() {
if (this.options.stroke) { if (this.options.stroke) {
this._ctx.lineWidth = this.options.weight; this._ctx.lineWidth = this.options.weight;
this._ctx.strokeStyle = this._getStyle(this.options.color, this.options.opacity); this._ctx.strokeStyle = this.options.color;
} }
if (this.options.fill) { if (this.options.fill) {
this._ctx.fillStyle = this._getStyle(this.options.fillColor || this.options.color, this.options.fillOpacity); this._ctx.fillStyle = this.options.fillColor || this.options.color;
} }
}, },
_drawPath : function() { _drawPath : function() {
this._updateStyle(); this._updateStyle();
if (this.setRadius) {
var p = this._point,
r = this._radius;
this._ctx.arc(p.x,p.y,r, 0,Math.PI*2);
}
else {
this._ctx.beginPath(); this._ctx.beginPath();
for (var i = 0, len = this._parts.length; i < len; i++) { for (var i = 0, len = this._parts.length; i < len; i++) {
for (var j=0;j<this._parts[i].length;j++) { for (var j=0;j<this._parts[i].length;j++) {
var point = this._parts[i][j]; var point = this._parts[i][j];
if (i == 0 && j == 0) {
if (j === 0) {
if (i > 0) {
this._ctx.closePath();
}
this._ctx.moveTo(point.x, point.y); this._ctx.moveTo(point.x, point.y);
} }
else { else {
@ -78,32 +67,26 @@ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({
} }
} }
} }
}
}, },
_updatePath: function() { _updatePath: function() {
this._drawPath(); this._drawPath();
if (this.options.fill) { if (this.options.fill) {
if (!this.setRadius) { this._ctx.globalAlpha = this.options.fillOpacity;
this._ctx.closePath(); this._ctx.closePath();
}
this._ctx.fill(); this._ctx.fill();
} }
if (this.options.stroke) { if (this.options.stroke) {
this._ctx.globalAlpha = this.options.opacity;
this._ctx.stroke(); this._ctx.stroke();
} }
}, },
_resetCanvas : function() {
this._ctx.clearRect(0, 0, this._map._pathRoot.width, this._map._pathRoot.height);
var w = this._map._pathRoot.width;
this._map._pathRoot.width = 1;
this._map._pathRoot.width = w;
},
_updateCanvasViewport: function() { _updateCanvasViewport: function() {
this._updateViewport(); this._updateViewport();
@ -117,18 +100,17 @@ L.Path = L.Path.SVG ? L.Path : !L.Path.Canvas ? L.Path.VML : L.Path.extend({
// Hack to make flicker on drag end on mobile webkit less irritating // Hack to make flicker on drag end on mobile webkit less irritating
// Unfortunately I haven't found a good workaround for this yet // Unfortunately I haven't found a good workaround for this yet
//if (L.Browser.mobileWebkit) { pane.removeChild(root); } if (L.Browser.mobileWebkit) { pane.removeChild(root); }
L.DomUtil.setPosition(root, min); L.DomUtil.setPosition(root, min);
root.setAttribute('width', width); //Attention resets canvas, but not on mobile webkit! root.setAttribute('width', width); //Attention resets canvas, but not on mobile webkit!
root.setAttribute('height', height); root.setAttribute('height', height);
this._resetCanvas();
var vp = this._map._pathViewport; var vp = this._map._pathViewport;
this._ctx.translate(-vp.min.x, -vp.min.y); this._ctx.translate(-vp.min.x, -vp.min.y);
//if (L.Browser.mobileWebkit) { pane.appendChild(root); } if (L.Browser.mobileWebkit) { pane.appendChild(root); }
}, },
_initEvents :function() { _initEvents :function() {