From 9c703b50aa4f382a882a5d142bb11d313188833f Mon Sep 17 00:00:00 2001 From: Markus Koch Date: Sun, 19 Apr 2020 22:47:35 +0200 Subject: Import L.LabelTextCollision.js and ctxtextpath.js into repo --- htdocs/index.html | 4 ++-- htdocs/leafletjs/L.LabelTextCollision.js | 13 ++++++++++++ htdocs/leafletjs/ctxtextpath.js | 35 ++++++++++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 htdocs/leafletjs/L.LabelTextCollision.js create mode 100644 htdocs/leafletjs/ctxtextpath.js diff --git a/htdocs/index.html b/htdocs/index.html index d9cff65..2d77687 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -10,8 +10,8 @@ - - + + diff --git a/htdocs/leafletjs/L.LabelTextCollision.js b/htdocs/leafletjs/L.LabelTextCollision.js new file mode 100644 index 0000000..7855f66 --- /dev/null +++ b/htdocs/leafletjs/L.LabelTextCollision.js @@ -0,0 +1,13 @@ +L.LabelTextCollision=L.Canvas.extend({options:{collisionFlg:true},initialize:function(options){options=L.Util.setOptions(this,options);},_handleMouseHover:function(e,point){var id,layer;for(id in this._drawnLayers){layer=this._drawnLayers[id];if(layer.options.interactive&&layer._containsPoint(point)){L.DomUtil.addClass(this._containerText,'leaflet-interactive');this._fireEvent([layer],e,'mouseover');this._hoveredLayer=layer;}} +if(this._hoveredLayer){this._fireEvent([this._hoveredLayer],e);}},_handleMouseOut:function(e,point){var layer=this._hoveredLayer;if(layer&&(e.type==='mouseout'||!layer._containsPoint(point))){L.DomUtil.removeClass(this._containerText,'leaflet-interactive');this._fireEvent([layer],e,'mouseout');this._hoveredLayer=null;}},_updateTransform:function(center,zoom){L.Canvas.prototype._updateTransform.call(this,center,zoom);var scale=this._map.getZoomScale(zoom,this._zoom),position=L.DomUtil.getPosition(this._container),viewHalf=this._map.getSize().multiplyBy(0.5+this.options.padding),currentCenterPoint=this._map.project(this._center,zoom),destCenterPoint=this._map.project(center,zoom),centerOffset=destCenterPoint.subtract(currentCenterPoint),topLeftOffset=viewHalf.multiplyBy(-scale).add(position).add(viewHalf).subtract(centerOffset);if(L.Browser.any3d){L.DomUtil.setTransform(this._containerText,topLeftOffset,scale);}else{L.DomUtil.setPosition(this._containerText,topLeftOffset);}},_initContainer:function(options){L.Canvas.prototype._initContainer.call(this);this._containerText=document.createElement('canvas');L.DomEvent.on(this._containerText,'mousemove',L.Util.throttle(this._onMouseMove,32,this),this).on(this._containerText,'click dblclick mousedown mouseup contextmenu',this._onClick,this).on(this._containerText,'mouseout',this._handleMouseOut,this);this._ctxLabel=this._containerText.getContext('2d');L.DomUtil.addClass(this._containerText,'leaflet-zoom-animated');this.getPane().appendChild(this._containerText);},_update:function(){this._textList=[];L.Renderer.prototype._update.call(this);var b=this._bounds,container=this._containerText,size=b.getSize(),m=L.Browser.retina?2:1;L.DomUtil.setPosition(container,b.min);container.width=m*size.x;container.height=m*size.y;container.style.width=size.x+'px';container.style.height=size.y+'px';container.style.zIndex='4';this._container.style.zIndex='3';if(L.Browser.retina){this._ctxLabel.scale(2,2);} +this._ctxLabel.translate(-b.min.x,-b.min.y);L.Canvas.prototype._update.call(this);},_updatePoly:function(layer,closed){L.Canvas.prototype._updatePoly.call(this,layer,closed);this._text(this._ctxLabel,layer);},_updateCircle:function(layer){L.Canvas.prototype._updateCircle.call(this,layer);this._text(this._ctxLabel,layer);},_text:function(ctx,layer){if(layer.options.text!=undefined){ctx.globalAlpha=1;var p=layer._point;var textPoint;if(p==undefined){if(layer._parts.length==0||layer._parts[0].length==0){return;} +p=this._getCenter(layer._parts[0]);} +var offsetX=0;var offsetY=0;ctx.lineWidth=4.0;ctx.font="16px 'Meiryo'";var textWidth=(ctx.measureText(layer.options.text).width) ++p.x;var textHeight=p.y+offsetY+20;var bounds=L.bounds(L.point(p.x+offsetX,p.y+offsetY),L.point(textWidth,textHeight));if(this.options.collisionFlg){for(var index in this._textList){var pointBounds=this._textList[index];if(pointBounds.intersects(bounds)){return;}}} +this._textList.push(bounds);ctx.strokeStyle="white";ctx.strokeText(layer.options.text,p.x+offsetX,p.y ++offsetY);if(layer.options.textColor==undefined){ctx.fillStyle="blue";}else{ctx.fillStyle=layer.options.textColor;} +ctx.fillText(layer.options.text,p.x+offsetX,p.y ++offsetY);}},_getCenter:function(points){var i,halfDist,segDist,dist,p1,p2,ratio,len=points.length;if(!len){return null;} +for(i=0,halfDist=0;ihalfDist){ratio=(dist-halfDist)/segDist;var resutl=[p2.x-ratio*(p2.x-p1.x),p2.y-ratio*(p2.y-p1.y)];return L.point(resutl[0],resutl[1]);}}},}); \ No newline at end of file diff --git a/htdocs/leafletjs/ctxtextpath.js b/htdocs/leafletjs/ctxtextpath.js new file mode 100644 index 0000000..c9389cb --- /dev/null +++ b/htdocs/leafletjs/ctxtextpath.js @@ -0,0 +1,35 @@ +(function() +{function dist2D(x1,y1,x2,y2) +{var dx=x2-x1;var dy=y2-y1;return Math.sqrt(dx*dx+dy*dy);} +CanvasRenderingContext2D.prototype.textOverflow="";CanvasRenderingContext2D.prototype.textJustify=false;CanvasRenderingContext2D.prototype.textStrokeMin=0;var state=[];var save=CanvasRenderingContext2D.prototype.save;CanvasRenderingContext2D.prototype.save=function() +{state.push({textOverflow:this.textOverflow,textJustify:this.textJustify,textStrokeMin:this.textStrokeMin,});save.call(this);} +var restore=CanvasRenderingContext2D.prototype.restore;CanvasRenderingContext2D.prototype.restore=function() +{restore.call(this);var s=state.pop();this.textOverflow=s.textOverflow;this.textJustify=s.textJustify;this.textStrokeMin=s.textStrokeMin;} +CanvasRenderingContext2D.prototype.textPath=function(text,path) +{var di,dpos=0;var pos=2;function pointAt(dl) +{if(!di||dpos+didl)break;pos+=2;if(pos>=path.length)break;dpos+=di;}} +var x,y,dt=dl-dpos;if(pos>=path.length) +{pos=path.length-2;} +if(!dt) +{x=path[pos-2];y=path[pos-1];} +else +{x=path[pos-2]+(path[pos]-path[pos-2])*dt/di;y=path[pos-1]+(path[pos+1]-path[pos-1])*dt/di;} +return[x,y,Math.atan2(path[pos+1]-path[pos-1],path[pos]-path[pos-2])];} +var letterPadding=this.measureText(" ").width*0.25;var d=0;for(var i=2;i0.1)this.strokeText(letter,0,0);this.fillText(letter,0,0);this.restore();start+=wl+letterPadding*(letter==" "?2:1);}};})(); \ No newline at end of file -- cgit v1.2.3