是否有任何簡單的轉換(轉換矩陣...)將部分A
轉換爲部分B
?唯一的要求是兩個部分應該具有相同的尺寸X
。形狀轉換 - 圓形部分
我打算用圖像填寫部分A
,然後將其轉換爲包含圖像的部分B
。現在我使用javascript KineticJS
,但我願意在必要時更改框架。
這樣可行嗎?
是否有任何簡單的轉換(轉換矩陣...)將部分A
轉換爲部分B
?唯一的要求是兩個部分應該具有相同的尺寸X
。形狀轉換 - 圓形部分
我打算用圖像填寫部分A
,然後將其轉換爲包含圖像的部分B
。現在我使用javascript KineticJS
,但我願意在必要時更改框架。
這樣可行嗎?
您的解決方案是不平凡的。
考慮該圖示中:
線輻射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個相鄰像素來實現這一點。該算法通過填充較大空間內的「缺失」像素,將較小的圖像放大爲較大的圖像。
您將不得不稍微調整此算法以執行非軸對齊插值。這裏有一個鏈接到雙線性插值的一個很好的例子:
只是爲了澄清,你想被完全包含在B中的結果,而不是在A + B的組合? 如果你想要A + B,你可以翻譯成楔形A的中心點,然後按(outsideRadiusA-insideRadiusA)/ totalRadius的比例進行縮放。如果你只想要B,那麼沒有你的需求x-before == x-after之後,你可以在中心點做一個縮放。但是鑑於你的x/x要求,沒有簡單的轉換。然後你需要一個縮放和插值的組合。 – markE
它應該只是B.所以你可能是對的,沒有簡單的轉換。你如何用縮放和插值來做到這一點? –