math - Determine image offset -


i've got large circle image fill pattern. circle rotated.

when click inside circle wish create smaller circle contains same image , same offset. should if smaller circle transparent.

so question follows:

how determine offset background image of smaller circle rotation of bigger circle?

here's example of incorrect offset:

an example of wrong offset

i’m guessing source image smaller circle same big circle--just unrotated.

if that’s case, need find un-rotated mouseclick position.

then can clip smaller circle around unrotated mouseclick , rotate place.

given:

  • your original center of rotation cx/cy,
  • your angle of rotation radangle (in radians)
  • your rotated mousclick point rx/ry.

you can calculate un-rotated mouseclick position ( prerx / prery ) this:

// bigger circle's rotation point   var cx=150; var cy=150;  // rotation angle in radians var radangle=math.pi/6;   // 30 degrees, example  // rotated mouseclick point var rx=225; var ry=245;  // radius of smaller circle var smallradius=50;  // calculate unrotated mouseclick point var dx= rx-cx; var dy= ry-cy; var prerx= cx+ dx*math.cos(-radangle) - dy*math.sin(-radangle);  var prery= cy+ dy*math.cos(-radangle) + dx*math.sin(-radangle);

then make clipping path using smaller circle

// create clipping path small circle ctx.arc(prerx,prery,smallradius,0,math.pi*2,false); ctx.closepath(); ctx.clip();

and translate + rotate , draw clipped image position

// rotate small circle position ctx.translate(cx,cy); ctx.rotate(radangle); ctx.globalalpha=1.0; ctx.drawimage(img,-img.width/2,-img.height/2);

here code , fiddle: http://jsfiddle.net/m1erickson/yat5r/

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <style>     body{ background-color: ivory; }     canvas{border:1px solid red;} </style>  <script> $(function(){      var canvas = document.getelementbyid('canvas');     var ctx=canvas.getcontext("2d");      var img=new image();     img.onload=function(){         draw();     }     img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";       function draw(){          // bigger circle's rotation point           var cx=150;         var cy=150;          // rotation angle in radians         var radangle=math.pi/6;   // 30 degrees          // rotated mouseclick point         var rx=225;         var ry=245;          // radius of smaller circle         var smallradius=50;          // calculate unrotated mouseclick point         var dx= rx-cx;         var dy= ry-cy;         var prerx= cx+ dx*math.cos(-radangle) - dy*math.sin(-radangle);          var prery= cy+ dy*math.cos(-radangle) + dx*math.sin(-radangle);          // test          // rotate original image , draw         ctx.save();         ctx.translate(cx,cy);         ctx.rotate(radangle);         ctx.globalalpha=.25;         ctx.drawimage(img,-img.width/2,-img.height/2);         ctx.restore();          // clip smaller image, rotate , draw         ctx.save();         ctx.beginpath();          // create clipping path small circle         ctx.arc(prerx,prery,smallradius,0,math.pi*2,false);         ctx.closepath();         ctx.clip();          // rotate small circle position         ctx.translate(cx,cy);         ctx.rotate(radangle);         ctx.globalalpha=1.0;         ctx.drawimage(img,-img.width/2,-img.height/2);          // stroke circle         ctx.arc(prerx,prery,smallradius,0,math.pi*2,false);         ctx.stroke();         ctx.restore();      }   }); // end $(function(){}); </script>  </head>  <body>     <p>original image 25% opacity</p>     <p>clipped overlay image 100% opacity</p>     <canvas id="canvas" width=350 height=350></canvas> </body> </html>

Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

c++ - qgraphicsview horizontal scrolling always has a vertical delta -

Image
i've subclassed qgraphicsview custom canvas used in cad application. i've reimplemented qgraphicsview::wheelevent check keyboard modifiers control key and, if control key pressed, zoom. i'm trying implement horizontal scroll when user holds shift , uses wheel. the problem i'm having horizontal scrolling always scrolls 0.279. not huge problem, hugely annoying , points else being wrong. so, here questions: is right way implement horizontal scrolling? if not, is? how eliminate delta of 0.279? thanks in advance. code , sample output below void myview::zoom(int delta) { double factor = pow(1.2, delta/abs(delta)); this->scale(factor, factor); } void myview::scrollhorizontal(int level) { qpointf center = maptoscene(viewport()->rect().center()); qdebug() << "center: " << center.x() << ", " << center.y(); centeron(qpointf(center.x() - level, center.y())); } void myview::wheelevent(qwheeleve...
Read more