2014-01-06 79 views
0

是否有任何簡單的轉換(轉換矩陣...)將部分A轉換爲部分B?唯一的要求是兩個部分應該具有相同的尺寸X形狀轉換 - 圓形部分

我打算用圖像填寫部分A,然後將其轉換爲包含圖像的部分B。現在我使用javascript KineticJS,但我願意在必要時更改框架。

這樣可行嗎?

Section A transformed to section B

+0

只是爲了澄清,你想被完全包含在B中的結果,而不是在A + B的組合? 如果你想要A + B,你可以翻譯成楔形A的中心點,然後按(outsideRadiusA-insideRadiusA)/ totalRadius的比例進行縮放。如果你只想要B,那麼沒有你的需求x-before == x-after之後,你可以在中心點做一個縮放。但是鑑於你的x/x要求,沒有簡單的轉換。然後你需要一個縮放和插值的組合。 – markE

+0

它應該只是B.所以你可能是對的,沒有簡單的轉換。你如何用縮放和插值來做到這一點? –

回答

1

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

考慮該圖示中:

線輻射360度向外從中心點和穿過兩個電弧A和B.

enter image description here

此圖顯示了圍繞中心點有更多的行。

enter image description here

認爲這是每一個像素從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