javascript - When Zoomed the canvas and then pan, now if I am trying to drag the objects within canvas then not able to do so. But canvas is panning only -

-

1) without scaling / zooming able pan canvas , able drag images.

2) able drag images within canvas if scaling / zooming.

3) but when pan canvas after zooming if trying drag images canvas panning. not able drag images

in imageshittests(x, y) , imageshittests2(x, y) finding hits on images drawn on main svg file.

there points panx , pany. how should solve this?

following code:

var datajson = data || []; var datajson2 = data2 || []; window.onload = 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 = {darthvader : '/static/images/orange1.png', yoda : '/static/images/green1.png'};       // load tiger svg file     var svgfiles = ["/static/images/awesome_tiger.svg"];             function draw(scalevalue){        ctx.clearrect(0,0,canvas.width,canvas.height);           ctx.save();       ctx.drawsvg(svgfiles[0],panx,pany,400*scalevalue, 400*scalevalue);        loadimages(sources, function(images){              ctx.scale(scalevalue, scalevalue);         for(var = 0, pos; pos = datajson[i]; i++) {                       ctx.drawimage(images.darthvader, 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.yoda, 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(parseint(pos.x) * scalevalue) && x <= parseint(parseint(pos.x) * scalevalue + parseint(20)) && y >= parseint(parseint(pos.y) * scalevalue) && y <= parseint(parseint(pos.y) * scalevalue + parseint(20))){               hits.push(i);                         }                       }                   });                 return(hits);     }      function imageshittests2(x,y){       // adjust panning       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 >= parseint(parseint(pos.x) * scalevalue) && x <= parseint(parseint(pos.x) * scalevalue + parseint(20)) && y >= parseint(parseint(pos.y) * scalevalue) && y <= parseint(parseint(pos.y) * scalevalue + parseint(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);});      }

if understand correctly must change coordinates , width\height of image on scale

you want - http://drag.com.hostinghood.com/?


Comments

Post a Comment

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

-
i use sonar plugin executes if activated in maven profile. sonar runs on every compile. the problem build fail other team members not have sonar application installed locally. pom.xml checked in team members same copy including sonar configuration, don't want them modify purpose of disabling sonar (they might inadvertently check modified copy in). please advise how configure maven (.m2/settings.xml) and/or pom.xml sonar feature can enabled/disabled local profile. here sonar configuration in each project's pom.xml: <plugin> <groupid>org.codehaus.mojo</groupid> <artifactid>sonar-maven-plugin</artifactid> <version>1.0</version> <executions> <execution> <id>make-sonar</id> <phase>compile</phase> <goals> <goal>sonar</goal> </goals> </execution> </executions> ...
Read more

python - TypeError: can only concatenate tuple (not "float") to tuple -

-
i'm new python, question might easy, anyway, patience: as trying call newton-raphson method calculate implied volatility in black-scholes formula call/put option pricing, first thing is, newton method in scipy.optimize seems calculate function's zeros, in black-scholes formula, want function's value option price, not zero. (i'm new here programming, i'm not sure techniques.) should write function things like: def f(sigma, price): return bsformula(s0,k,r,t,q,sigma) - price then, while calling newton method, takes args=() 1 parameter in function, write this: value = newton(bsprice2, 0.5, args=price) but error message: file "bs.py", line 36, in bsimpvol value = newton(bsprice2, 0.5, args=float(price)) file "/usr/lib/python2.7/dist-packages/scipy/optimize/zeros.py", line 143, in newton q0 = func(*((p0,) + args)) typeerror: can concatenate tuple (not "float") tuple could tell me why that? how fix it? apprecia...
Read more

java - What is the difference between String. and String.this. ? -

-
this question has answer here: meaning of .this , .class in java 2 answers i'll straight point. im still learning bit of syntax , want know difference between code is code a: public class buttonz extends jbutton{ public buttonz(){ settext(new string(string.valueof(i))); } } please ignore fact i undeclared, not lost. code b: public class buttonz extends jbutton{ public buttonz(){ settext(new string(string.this.charat(i))); } } what don't yet understand difference in typing string.this , string. i under assumption when use dot operator on class accessing it's static methods(and/or variables if they're not hidden). i have studied little bit , have concluded when using string. accessing string static methods.. when using string.this. i'm accessing methods class buttonz extendi...
Read more