canvaslayer
Advanced tools
+1
-1
@@ -1,1 +0,1 @@ | ||
| domhammer=require("domhammer");var jcanvas=require("jcanvas");jcanvas($,window);var GuoInit={},ds=1,dlayer="",dsev=1,dro=0,drote=0,droend=0,dwidth="",dheight="",dragflag=!1,dragflagX="",deviceRatio=1,dimgname="",cvstouch=!0,ham="",notlay=!1,rotateXY="";GuoInit.touchmore={fun:function(d){d[0].addEventListener("touchstart",function(e){if(1==e.touches.length){dragflag=1;var t=d[0].getBoundingClientRect(),a=d.getLayer("dashed"),r=e.changedTouches[0];if(d.setLayers({disableEvents:!1}),a){var o=d.getLayer("dele");(r.clientX-t.left<rotateXY.x-o.radius||rotateXY.x+o.radius<r.clientX-t.left||r.clientY-t.top<rotateXY.y-o.radius||r.clientY-t.top>rotateXY.y+o.radius)&&d.removeLayerGroup("delebox")}}else dragflag=2},!1)}},GuoInit.canvaslayer={addlayerfun:function(t,a,e,r){dlayer="",cvstouch&&(t.detectPixelRatio(function(e){deviceRatio=e}),(ham=new Hammer(t[0])).get("pinch").set({enable:!0,threshold:0}),ham.get("rotate").set({enable:!0,threshold:0}),GuoInit.touchmore.fun(t),GuoInit.canvaslayer.scalefun(t),"boolean"==typeof r&&void 0!==r&&r&&GuoInit.canvaslayer.rotatefun(t)),cvstouch=!1;var o=new Image;o.onload=function(){t.addLayer({type:"image",name:a,groups:[a,a+"_sca"],dragGroups:[a],draggable:!0,bringToFront:!0,x:0,y:0,scale:1,rotate:0,width:o.width,height:o.height,fromCenter:!1,source:e,touchstart:function(e){1==event.touches.length&&1==dragflag?(notlay=!0,dimgname=a,dragflagX=(dlayer=e).x,dwidth=e.width,dheight=e.height,dsev=e.scale,droend=e.rotate,rotateXY=GuoInit.canvaslayer.rotateleftfun(droend,dsev),GuoInit.canvaslayer.delefun(t),dlayer.restrictDragToAxis=null):notlay||t.setLayers({disableEvents:!0})},dragstart:function(e){},drag:function(e){rotateXY=GuoInit.canvaslayer.rotateleftfun(droend,dsev)},updateDragX:function(e,t){return 2==dragflag?(dlayer.restrictDragToAxis="x",dragflagX):t},dragstop:function(e){notlay=!1},touchend:function(e){dragflagX=dlayer.x,notlay=!1}}).drawLayers()},o.src=e},delefun:function(t){t.addLayer({type:"rectangle",x:dlayer.x-4,y:dlayer.y-4,scale:dlayer.scale,rotate:dlayer.rotate,width:dlayer.width+8,height:dlayer.height+8,name:"dashed",fromCenter:!1,intangible:!0,groups:["delebox",dimgname,dimgname+"_sca"],strokeWidth:deviceRatio<=2?.2:.8,strokeStyle:"rgba(255, 0, 0, 0.3)",strokeDash:[5]}).addLayer({type:"arc",x:rotateXY.x||(dwidth-dwidth*dsev)/2+dlayer.x,y:rotateXY.y||(dheight-dheight*dsev)/2+dlayer.y,name:"dele",groups:["delebox","acrx",dimgname],radius:12,fromCenter:!0,strokeWidth:1,fillStyle:"rgba(255, 255, 255, 0.1)",strokeStyle:"rgba(255, 0, 0, 0.2)",touchstart:function(e){t.removeLayerGroup(dimgname)}}).drawText({layer:!0,x:rotateXY.x||(dwidth-dwidth*dsev)/2+dlayer.x,y:rotateXY.y||(dheight-dheight*dsev)/2+dlayer.y,name:"chax",groups:["delebox","acrx",dimgname],fontFamily:"Arial",fontSize:12,fillStyle:"rgb(230,160,160)",strokeStyle:"rgba(255, 255, 255, 0.1)",strokeWidth:1,text:"x",touchstart:function(e){t.removeLayerGroup(dimgname)}})},scalefun:function(t){ham.on("pinchstart",function(e){ds=dlayer.scale}),ham.on("pinchmove",function(e){2==e.maxPointers&&2==dragflag&¬lay&&.1<(dsev=ds*e.scale)&&dsev<5&&(dlayer.scale=dsev,t.setLayerGroup(dimgname+"_sca",{scale:dsev}),rotateXY=GuoInit.canvaslayer.rotateleftfun(drote,dsev),GuoInit.canvaslayer.rotateUpdata(t)),t.drawLayers()}),ham.on("pinchend",function(e){ds=dsev,notlay=!1})},rotatefun:function(t){ham.on("rotatestart",function(e){dro=e.rotation}),ham.on("rotatemove",function(e){2==e.maxPointers&&2==dragflag&¬lay&&(drote=e.rotation-dro+droend,dlayer.rotate=drote,t.setLayerGroup(dimgname+"_sca",{rotate:drote}),GuoInit.canvaslayer.rotateUpdata(t))}),ham.on("rotateend",function(e){droend=drote,notlay=!1})},rotateleftfun:function(e,t){var a=dwidth*t,r=dheight*t,o=Math.sqrt(Math.pow(a,2)+Math.pow(r,2))/2+20,d=180*Math.atan(r/a)/Math.PI,n=d+e,i=(dheight-dheight*t)/2,l=a/2+(dwidth-dwidth*t)/2+dlayer.x-Math.cos(n*Math.PI/180)*o,s=r/2+i+dlayer.y-Math.sin(n*Math.PI/180)*o;return{x:l,y:s}},rotateUpdata:function(e){e.setLayer("dele",{x:rotateXY.x,y:rotateXY.y}),e.setLayer("chax",{x:rotateXY.x,y:rotateXY.y})}},module.exports=GuoInit.canvaslayer.addlayerfun; | ||
| var domhammer=require("domhammer"),jcanvas=require("jcanvas");jcanvas($,window);var GuoInit={},ds=1,dlayer="",dsev=1,dro=0,drote=0,droend=0,dwidth="",dheight="",dragflag=!1,dragflagX="",deviceRatio=1,dimgname="",cvstouch=!0,ham="",notlay=!1,rotateXY="";GuoInit.touchmore={fun:function(d){d[0].addEventListener("touchstart",function(e){if(1==e.touches.length){dragflag=1;var t=d[0].getBoundingClientRect(),a=d.getLayer("dashed"),r=e.changedTouches[0];if(d.setLayers({disableEvents:!1}),a){var o=d.getLayer("dele");(r.clientX-t.left<rotateXY.x-o.radius||rotateXY.x+o.radius<r.clientX-t.left||r.clientY-t.top<rotateXY.y-o.radius||r.clientY-t.top>rotateXY.y+o.radius)&&d.removeLayerGroup("delebox")}}else dragflag=2},!1)}},GuoInit.canvaslayer={addlayerfun:function(t,a,e,r){dlayer="",cvstouch&&(t.detectPixelRatio(function(e){deviceRatio=e}),(ham=new Hammer(t[0])).get("pinch").set({enable:!0,threshold:0}),ham.get("rotate").set({enable:!0,threshold:0}),GuoInit.touchmore.fun(t),GuoInit.canvaslayer.scalefun(t),"boolean"==typeof r&&void 0!==r&&r&&GuoInit.canvaslayer.rotatefun(t)),cvstouch=!1;var o=new Image;o.onload=function(){t.addLayer({type:"image",name:a,groups:[a,a+"_sca"],dragGroups:[a],draggable:!0,bringToFront:!0,x:0,y:0,scale:1,rotate:0,width:o.width,height:o.height,fromCenter:!1,source:e,touchstart:function(e){1==event.touches.length&&1==dragflag?(notlay=!0,dimgname=a,dragflagX=(dlayer=e).x,dwidth=e.width,dheight=e.height,dsev=e.scale,droend=e.rotate,rotateXY=GuoInit.canvaslayer.rotateleftfun(droend,dsev),GuoInit.canvaslayer.delefun(t),dlayer.restrictDragToAxis=null):notlay||t.setLayers({disableEvents:!0})},dragstart:function(e){},drag:function(e){rotateXY=GuoInit.canvaslayer.rotateleftfun(droend,dsev)},updateDragX:function(e,t){return 2==dragflag?(dlayer.restrictDragToAxis="x",dragflagX):t},dragstop:function(e){notlay=!1},touchend:function(e){dragflagX=dlayer.x,notlay=!1}}).drawLayers()},o.src=e},delefun:function(t){t.addLayer({type:"rectangle",x:dlayer.x-4,y:dlayer.y-4,scale:dlayer.scale,rotate:dlayer.rotate,width:dlayer.width+8,height:dlayer.height+8,name:"dashed",fromCenter:!1,intangible:!0,groups:["delebox",dimgname,dimgname+"_sca"],strokeWidth:deviceRatio<=2?.2:.8,strokeStyle:"rgba(255, 0, 0, 0.3)",strokeDash:[5]}).addLayer({type:"arc",x:rotateXY.x||(dwidth-dwidth*dsev)/2+dlayer.x,y:rotateXY.y||(dheight-dheight*dsev)/2+dlayer.y,name:"dele",groups:["delebox","acrx",dimgname],radius:12,fromCenter:!0,strokeWidth:1,fillStyle:"rgba(255, 255, 255, 0.1)",strokeStyle:"rgba(255, 0, 0, 0.2)",touchstart:function(e){t.removeLayerGroup(dimgname)}}).drawText({layer:!0,x:rotateXY.x||(dwidth-dwidth*dsev)/2+dlayer.x,y:rotateXY.y||(dheight-dheight*dsev)/2+dlayer.y,name:"chax",groups:["delebox","acrx",dimgname],fontFamily:"Arial",fontSize:12,fillStyle:"rgb(230,160,160)",strokeStyle:"rgba(255, 255, 255, 0.1)",strokeWidth:1,text:"x",touchstart:function(e){t.removeLayerGroup(dimgname)}})},scalefun:function(t){ham.on("pinchstart",function(e){ds=dlayer.scale}),ham.on("pinchmove",function(e){2==e.maxPointers&&2==dragflag&¬lay&&.1<(dsev=ds*e.scale)&&dsev<5&&(dlayer.scale=dsev,t.setLayerGroup(dimgname+"_sca",{scale:dsev}),rotateXY=GuoInit.canvaslayer.rotateleftfun(drote,dsev),GuoInit.canvaslayer.rotateUpdata(t)),t.drawLayers()}),ham.on("pinchend",function(e){ds=dsev,notlay=!1})},rotatefun:function(t){ham.on("rotatestart",function(e){dro=e.rotation}),ham.on("rotatemove",function(e){2==e.maxPointers&&2==dragflag&¬lay&&(drote=e.rotation-dro+droend,dlayer.rotate=drote,t.setLayerGroup(dimgname+"_sca",{rotate:drote}),GuoInit.canvaslayer.rotateUpdata(t))}),ham.on("rotateend",function(e){droend=drote,notlay=!1})},rotateleftfun:function(e,t){var a=dwidth*t,r=dheight*t,o=Math.sqrt(Math.pow(a,2)+Math.pow(r,2))/2+20,d=180*Math.atan(r/a)/Math.PI,n=d+e,i=(dheight-dheight*t)/2,l=a/2+(dwidth-dwidth*t)/2+dlayer.x-Math.cos(n*Math.PI/180)*o,s=r/2+i+dlayer.y-Math.sin(n*Math.PI/180)*o;return{x:l,y:s}},rotateUpdata:function(e){e.setLayer("dele",{x:rotateXY.x,y:rotateXY.y}),e.setLayer("chax",{x:rotateXY.x,y:rotateXY.y})}},module.exports=GuoInit.canvaslayer.addlayerfun; |
+2
-2
| { | ||
| "name": "canvaslayer", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Canvas添加多个图层操作,支持单个图层的拖动、缩放、转转.Canvas adds multiple layers,Support single layer drag, zoom, rotation,Support android version 4.4+ and ios.", | ||
@@ -25,3 +25,3 @@ "main": "canvaslayer.js", | ||
| "dependencies":{ | ||
| "screen-pl": "^1.0.0", | ||
| "screen-pl": "^1.0.1", | ||
| "domhammer": "^1.0.0", | ||
@@ -28,0 +28,0 @@ "jcanvas": "^21.0.1" |
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
0
-100%Updated