如何圖像像素轉換）轉換|（-curve形狀帆布

Question

我有以下模式的圖像：

我想直線轉換圖像中成）|（ 。形狀我已經實現用帆布C型和S型曲線和它的屬性，但我不能這樣做）|（-curve

我怎樣才能做到這一點

Answer 1

您可以修改my previous answer略，並具有施加到的寬度（或高度）的半部罪範圍如偏移量，然後取該偏移量x 2並從新行的總高度中減去。

會發生什麼情況是sin（）函數將接受輸入並在[0.0，1.0]之間產生一個新值。通常情況下，你可以結合sin + cos來產生一個圓，但是我們只需要一個軸的值​​，因爲我們只需要更多的橢圓形，所以我們用小於半徑的值進行縮放（圖像大小代表軸上的直徑）之後）。

與我在其他的回答讓代碼夫妻修改

所以：

var ctx = c.getContext("2d");   // just some inits for demo 
 
var img = new Image; 
 
img.onload = slice; 
 
img.src = "//i.stack.imgur.com/UvqUP.gif"; 
 

 
function slice() { 
 
    var w = c.width = this.width; 
 
    var h = c.height = this.height; 
 
    var step = Math.PI/w;    // half circle/width of canvas 
 
    var scale = 75;      // max displacement on y 
 
    
 
    for(var x = 0, offset; x < w; x++) { 
 
    offset = Math.sin(step*x)*scale; 
 
    ctx.drawImage(this, 
 
     x, 0, 1, h,      // source line from image 
 
     x, offset, 1, h - offset*2);  // displaced line 
 
    } 
 
}

<canvas id=c></canvas>

（垂直作用只是參考其中的變化是在以前的答案和適用抵消，而不是公式）。

Answer 2

使用來自距離？水平中心將一個正弦波應用於圖像比例，您只需要部分o F中的正弦波（PI/2到PI）或（COS 0〜PI/2）

var img = new Image; 
 
img.src = "//i.stack.imgur.com/UvqUP.gif"; 
 
var ctx = can.getContext("2d"); 
 
img.onload = function() { 
 
    var w,h,ch,cw,amount,x,scale; 
 
    w = can.width = this.width; 
 
    h = can.height = this.height; 
 
    cw = w/2; 
 
    ch = h/2; 
 
    amount = 50; // amount to bend in pixels 
 
    amount *= 1/ch; // convert to unit scale 
 
    for(var x = 0; x < w; x++) { 
 
    \t scale = 1.0 - (Math.cos(((cw - x)/cw) * Math.PI * 0.5)) * amount; 
 
     ctx.drawImage(this, x, 0, 1, h, x, ch - ch * scale , 1, h * scale); 
 
    } 
 
}

<canvas id="can"></canvas>