Déterminer le décalage d'image

J'ai un grand cercle avec une image comme motif de remplissage. Le cercle est tourné. Lorsque je clique à l'intérieur du cercle, je souhaite créer un cercle plus petit qui contient la même image et le même décalage. Essentiellement, cela devrait ressembler à un petit cercle transparent.Déterminer le décalage d'image

Donc, ma question est la suivante:

Comment puis-je déterminer le décalage de l'image de fond du petit cercle avec la rotation du plus grand cercle?

Voici un exemple du décalage incorrect:

An example of the wrong offset

Source

2013-05-09 peterp

Je devine que l'image source pour votre petit cercle est le même que le grand cercle - juste unrotated.

Si c'est le cas, vous devez trouver votre position de clic de souris non pivoté.

Ensuite, vous pouvez couper votre petit cercle autour du mousqueton non pivoté et le faire pivoter en place.

Étant donné:

Votre centre de rotation d'origine est cx/cy,
Votre angle de rotation est radAngle (en radians)
Votre point de rotation est mousclick rx/ry.

Vous pouvez calculer votre position de mouseclick tourné un (preRX/Prery) comme ceci:

// the bigger circle's rotation point 
var cx=150; 
var cy=150; 

// the rotation angle in radians 
var radAngle=Math.PI/6; // 30 degrees, for example 

// the rotated mouseclick point 
var rx=225; 
var ry=245; 

// the radius of the smaller circle 
var smallRadius=50; 

// calculate the 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);

Ensuite, vous faites un chemin de détourage en utilisant votre petit cercle

// create a clipping path for the small circle 
ctx.arc(preRX,preRY,smallRadius,0,Math.PI*2,false); 
ctx.closePath(); 
ctx.clip();

Et enfin traduire + faire pivoter et dessiner l'image coupée en position

// rotate the small circle into position 
ctx.translate(cx,cy); 
ctx.rotate(radAngle); 
ctx.globalAlpha=1.0; 
ctx.drawImage(img,-img.width/2,-img.height/2);

Voici un code et un violon: 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(){ 

     // the bigger circle's rotation point 
     var cx=150; 
     var cy=150; 

     // the rotation angle in radians 
     var radAngle=Math.PI/6; // 30 degrees 

     // the rotated mouseclick point 
     var rx=225; 
     var ry=245; 

     // the radius of the smaller circle 
     var smallRadius=50; 

     // calculate the 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 the original image and draw it 
     ctx.save(); 
     ctx.translate(cx,cy); 
     ctx.rotate(radAngle); 
     ctx.globalAlpha=.25; 
     ctx.drawImage(img,-img.width/2,-img.height/2); 
     ctx.restore(); 

     // clip the smaller image, rotate it and draw it 
     ctx.save(); 
     ctx.beginPath(); 

     // create a clipping path for the small circle 
     ctx.arc(preRX,preRY,smallRadius,0,Math.PI*2,false); 
     ctx.closePath(); 
     ctx.clip(); 

     // rotate the small circle into position 
     ctx.translate(cx,cy); 
     ctx.rotate(radAngle); 
     ctx.globalAlpha=1.0; 
     ctx.drawImage(img,-img.width/2,-img.height/2); 

     // stroke the circle 
     ctx.arc(preRX,preRY,smallRadius,0,Math.PI*2,false); 
     ctx.stroke(); 
     ctx.restore(); 

    } 


}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <p>Original image is 25% opacity</p> 
    <p>Clipped overlay image is 100% opacity</p> 
    <canvas id="canvas" width=350 height=350></canvas> 
</body> 
</html>

Source

2013-05-09 21:35:33 markE

Déterminer le décalage d'image

Répondre

Questions connexes