形状转换 - 圆形部分

Question

是否有任何简单的转换（转换矩阵...）将部分A转换为部分B？唯一的要求是两个部分应该具有相同的尺寸X。

我打算用图像填写部分A，然后将其转换为包含图像的部分B。现在我使用javascript KineticJS，但我愿意在必要时更改框架。

这样可行吗？

Answer 1

您的解决方案是不平凡的。

考虑该图示中：

线辐射360度向外从中心点和穿过两个电弧A和B.

此图显示了围绕中心点有更多的行。

认为这是每一个像素从A移动到B中对应的像素这使用线性内插（lerping）给每个像素从A移动到B.彩色像素的总数在甲& B是相同的 - 没有像素已被“神奇地”加入到B.

下面是这个图示码：

var cx=150; 
var cy=150; 

ctx.lineWidth=1; 
for(var a=0;a<Math.PI*2;a+=Math.PI/240){ 
for(var r=25;r<50;r++){ 
    var x1=cx+r*Math.cos(a); 
    var y1=cy+r*Math.sin(a); 
    var x2=cx+(r+25)*Math.cos(a); 
    var y2=cy+(r+25)*Math.sin(a); 
    ctx.fillStyle="blue"; 
    ctx.fillRect(x1,y1,1,1); 
    ctx.fillStyle="blue"; 
    ctx.fillRect(x2,y2,1,1); 
} 
} 
ctx.lineWidth=2; 
ctx.beginPath(); 
ctx.arc(cx,cy,25,0,Math.PI*2); 
ctx.closePath(); 
ctx.stroke(); 
ctx.beginPath(); 
ctx.arc(cx,cy,50,0,Math.PI*2); 
ctx.closePath(); 
ctx.stroke(); 
ctx.beginPath(); 
ctx.arc(cx,cy,75,0,Math.PI*2); 
ctx.closePath(); 
ctx.stroke(); 

问题

请注意，大部分电弧A是用蓝色像素填充的，而B的某些部分是“模糊”（未完全填充）。这是因为A的像素数量不会完全填满B的较大空间。

您的图像看起来是一样的。它在弧A中看起来“正确”，但在弧B中将缺少像素。

你需要做的是“用B填充空白”和适当确定的像素。

溶液

可以用等，其通过选择“最好”的像素颜色填充在间隙中乙双线性内插的算法完成此操作。它通过比较弧A中的4个相邻像素来实现这一点。该算法通过填充较大空间内的“缺失”像素，将较小的图像放大为较大的图像。

您将不得不稍微调整此算法以执行非轴对齐插值。这里有一个链接到双线性插值的一个很好的例子：

http://strauss.pas.nu/js-bilinear-interpolation.html