javascript - How to drag images / objects within Canvas after zooming / scaling them? -
following complete code. edited per link how drag images / objects within canvas?.
requirement :
basically doing is, first drawing svg file on canvas drawsvg of canvg.
on file plotting images(green1.png , orange1.png) through json present in markers.js.
scenario 1:
if pan without zooming/scaling able drag images(green1.png, orange1.png) , able pan canvas properly.
but if zoom after panning images not translating on proper position because of panx , pany points. panx , pany point want panning.
scenario 2: :
if scale/zoom first , if pan images(orange1.png, green1.png) changing position , not able drag images (orange1.png, green1.png).
what can done in these scenarios?
html code :
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <style> canvas { border:1px solid #000 } .tooltip{ *position:fixed; position:absolute; *background:#ff7; background:green; border:1px solid #000; padding:7px; font-family:sans-serif; font-size:12px; } .tooltip2 { *position:fixed; position:absolute; background:pink; border:1px solid #000; padding:7px; font-family:sans-serif; font-size:12px; } </style> </head> <body> <script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> <script src="http://canvg.googlecode.com/svn/trunk/stackblur.js"></script> <script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> <canvas id="mycanvas" width="800" height="700" style="border: 1px solid;margin-top: 10px;"></canvas> <div id="buttonwrapper"> <input type="button" id="plus" value="+"> <input type="button" id="minus" value="-"> <input type="button" id="original_size" value="100%"> </div> <script src="/static/js/markers.js"></script> <script src="/static/js/draw.js"></script> </body> </html> draw.js:
var datajson = data || []; var datajson2 = data2 || []; window.onload = function(){ //$(function(){ var canvas=document.getelementbyid("mycanvas"); var ctx=canvas.getcontext("2d"); var canvasoffset=$("#mycanvas").offset(); var offsetx=canvasoffset.left; var offsety=canvasoffset.top; var lastx=0; var lasty=0; var panx=0; var pany=0; var dragging=[]; var dragging2=[]; var isdown=false; function loadimages(sources, callback){ var images = {}; var loadimages = 0; var numimages = 0; //get num of sources for(var in sources){ numimages++; } for(var in sources){ images[i] = new image(); images[i].onload = function(){ if(++loadimages >= numimages){ callback(images); } }; images[i].src = sources[i]; } } var sources = {orange : '/static/images/orange1.png', green : '/static/images/green1.png'}; // load tiger image var svgfiles = ["/static/images/awesome_tiger.svg"]; /*var tiger=new image(); tiger.onload=function(){ draw(); } tiger.src="tiger.png";*/ function draw(scalevalue){ ctx.clearrect(0,0,canvas.width,canvas.height); ctx.save(); ctx.drawsvg(svgfiles[0],panx,pany,400*scalevalue, 400*scalevalue); //ctx.drawimage(tiger,panx,pany,tiger.width,tiger.height); //ctx.scale(scalevalue, scalevalue); loadimages(sources, function(images){ ctx.scale(scalevalue, scalevalue); for(var = 0, pos; pos = datajson[i]; i++) { ctx.drawimage(images.orange, parseint(parseint(pos.x) + parseint(panx)), parseint(parseint(pos.y) + parseint(pany)), 20/scalevalue, 20/scalevalue); } for(var = 0, pos; pos = datajson2[i]; i++) { ctx.drawimage(images.green, parseint(parseint(pos.x) + parseint(panx)), parseint(parseint(pos.y) + parseint(pany)), 20/scalevalue, 20/scalevalue); } ctx.restore(); }); }; var scalevalue = 1; var scalemultiplier = 0.8; draw(scalevalue); var startdragoffset = {}; var mousedown = false; // add button event listeners document.getelementbyid("plus").addeventlistener("click", function(){ scalevalue /= scalemultiplier; //checkboxzoompan(); draw(scalevalue); }, false); document.getelementbyid("minus").addeventlistener("click", function(){ scalevalue *= scalemultiplier; //checkboxzoompan(); draw(scalevalue); }, false); document.getelementbyid("original_size").addeventlistener("click", function(){ scalevalue = 1; //checkboxzoompan(); draw(scalevalue); }, false); // create array of "hit" colored-images function imageshittests(x,y){ // adjust panning x-=panx; y-=pany; // create var hold hits var hits=[]; // hit-test each image // add hits hits[] loadimages(sources, function(images){ for(var = 0, pos; pos = datajson[i]; i++) { if(x >= parseint(pos.x * scalevalue) && x <= parseint((pos.x * scalevalue) + 20) && y >= parseint(pos.y * scalevalue) && y <= parseint((pos.y * scalevalue) + 20)){ hits.push(i); } } }); return(hits); } function imageshittests2(x,y){ // adjust panning //x-=panx; //x = parseint(x) - parseint(panx); // y-=pany; x-=panx; y-=pany; // create var hold hits var hits2=[]; // hit-test each image // add hits hits[] loadimages(sources, function(images){ for(var = 0, pos; pos = datajson2[i]; i++) { //if(x > pos.x && x < parseint(parseint(pos.x) + parseint(20)) && y > pos.y && y < parseint(parseint(pos.y) + parseint(20))){ if(x >= parseint(pos.x * scalevalue) && x <= parseint((pos.x * scalevalue) + 20) && y >= parseint(pos.y * scalevalue) && y <= parseint((pos.y * scalevalue) + 20)){ hits2.push(i); } } }); return(hits2); } function handlemousedown(e){ // mouse coordinates mousex=parseint(e.clientx-offsetx); mousey=parseint(e.clienty-offsety); // set starting drag position lastx=mousex; lasty=mousey; // test if we're on of images dragging=imageshittests(mousex,mousey); dragging2=imageshittests2(mousex,mousey); // set dragging flag isdown=true; } function handlemouseup(e){ // clear dragging flag isdown=false; } function handlemousemove(e){ // if we're not dragging, exit if(!isdown){ return; } //get mouse coordinates mousex=parseint(e.clientx-offsetx); mousey=parseint(e.clienty-offsety); // calc how mouse has moved since last here var dx=mousex-lastx; var dy=mousey-lasty; // set lastxy next time we're here lastx=mousex; lasty=mousey; // handle drags/pans if(dragging.length>0){ // we're dragging images // move affected images how mouse has moved for(var = 0, pos; pos = datajson[dragging[i]]; i++) { pos.x = parseint(pos.x) + parseint(dx); pos.y = parseint(pos.y) + parseint(dy); } } else if(dragging2.length>0){ for(var = 0, pos1; pos1 = datajson2[dragging2[i]]; i++) { pos1.x = parseint(pos1.x) + parseint(dx); pos1.y = parseint(pos1.y) + parseint(dy); } } else{ // we're panning tiger // set panxy how mouse has moved panx+=dx; pany+=dy; } draw(scalevalue); } // use jquery handle mouse events $("#mycanvas").mousedown(function(e){handlemousedown(e);}); $("#mycanvas").mousemove(function(e){handlemousemove(e);}); $("#mycanvas").mouseup(function(e){handlemouseup(e);}); // }); // end $(function(){}); } markers.js:
data = [ { "id" :["first"], "x": ["195"], "y": ["150"], "tooltiptxt": ["region 1"] }, { "id" :["second"], "x": ["255"], "y": ["180"], "tooltiptxt": ["region 2"] }, { "id" :["third"], "x": ["200"], "y": ["240"], "tooltiptxt": ["region 3"] } ]; data2 = [ { "id" :["first2"], "x": ["225"], "y": ["150"], "tooltiptxt": ["region 21"] }, { "id" :["second2"], "x": ["275"], "y": ["180"], "tooltiptxt": ["region 22"] }, { "id" :["third3"], "x": ["300"], "y": ["240"], "tooltiptxt": ["region 23"] } ];
1.) positionx * xscale , positiony * yscale
2.) try code in draw function
ctx.drawimage(images.orange, parseint(parseint(pos.x) + parseint(panx / scalevalue)), parseint(parseint(pos.y) + parseint(pany / scalevalue)), 20/scalevalue, 20/scalevalue);
Comments
Post a Comment