0

我试图扭曲画布中显示的图像，所以它看起来像一个“行星”。但是，我正在努力寻找解决失真问题的方法。想到的唯一解决方案是找到一种方法来减少radiusDistance变量，它越大。也就是说，我不确定如何实现这一目标。有什么建议么？

以下是我目前用来实现此目的的数学和对象：

polarArray = [];
var polar = function(a,r,c){ //polar object, similar to pixel object.
    this.a = a; //angle
    this.r = r; //radius (distance)
    this.color = c; //color, stored using an object containg r,g,b,a variables
};
loopAllPixels(function(loop){//loop through every pixel, stored in a pixel array
    var pixel = loop.pixel;
    /*each pixel object is structured like this:
        pixel {
            x,
            y,
            color {
                r,
                g,
                b,
                a
            }
        }
    */
    var angle = pixel.x/360*Math.PI;
    var radiusDistance = pixel.y/Math.PI;
    polarArray.push(new polar(angle,radiusDistance,pixel.color));//store polar coordinate pixel + colour.
    pixel.color = new colorRGBA(255,255,255,255);//set background as white.
});
for (var i=0;i<polarArray.length;i++){//loop through polarArray (polar coordinate pixels + colour)
    var p = polarArray[i]; //polar pixel
    var x = (p.r*Math.cos(p.a))+(canvas.width/2); //x coordinate
    var y = (p.r*Math.sin(p.a))+(canvas.height/2); //y coordinate
    if (setpixel(x,y,p.color)==true){ //set pixel at location.
        continue;
    }
    break;

}
updatePixelsToContext();//draw to canvas

这是它当前产生的效果（请注意，我在将图像应用到画布之前水平翻转图像，在此示例中，我将背景设置为洋红色，以使问题更清晰）：

在此处输入图像描述

注意： 我想要的是翘曲效果，而不是像素的“撕裂”，这是由于没有获得所需的所有必要像素数据而引起的。

还要记住，速度和效率还不是我的首要任务。

4

0 回答 0