1. 首頁
  2. 問答
  3. 確定圖像偏移量

確定圖像偏移量

2013-05-09 146 views
0

我有一個大圖像作爲填充圖案的圓圈。圓圈旋轉。確定圖像偏移量

當我在圓圈內單擊時，我希望創建一個包含相同圖像和相同偏移量的較小圓圈。本質上它應該看起來好像小圓圈是透明的。

所以我的問題是：

如何確定與更大的圓圈旋轉的小圓圈的背景圖像偏移？

這裏是不正確的例子偏移：

An example of the wrong offset

來源

2013-05-09 peterp

回答

1

我猜你的小了一圈源圖像是一樣的大圈 - 只是不旋轉。

如果是這樣的話，您需要找到您未旋轉的鼠標點擊位置。

然後你可以將你的小圓圈夾在未旋轉的鼠標點擊並旋轉到位。

鑑於：

  • 你的旋轉中心原來是CX/CY，
  • 你的旋轉角度是radAngle（弧度）
  • 你的旋轉mousclick點是RX/RY。

你可以計算出你的非旋轉鼠標點擊位置（preRX/preRY）是這樣的：

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

然後你用你的小了一圈

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

這裏是代碼和小提琴：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>

來源

2013-05-09 21:35:33 markE

相關問題

 相關問題