形状变换 - 圆形截面

Question

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

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

可行吗？

Answer 1

您的解决方案并非无足轻重。

考虑这个例子：

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

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

将此视为将每个像素从A移动到B中的相应像素。这使用线性插值（lerping）将每个像素从A移动到B.A＆amp; A中的彩色像素总数。 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中的间隙”。

解决方案

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

您必须稍微调整此算法才能进行非轴对齐插值。这是一个很好的双线性插值示例的链接：

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