面料JS html 5圖像彎曲選項

Question

我想用html5工具製作圖像曲線。

我使用Fabric.js作爲html5畫布工具。

請指導我如何在像馬克杯，玻璃，圓柱形或圓形產品的圖像上製作曲面圖像。

Ref。圖像低於：

http://vsdemo.cwwws.com/Images/ProductImages/asdasd.jpg

Answer 1

你所渴望被稱爲「透視變形」，而不是在本地2D畫布可用。

您可以通過用適當的Y偏移繪製圖像的1個像素寬的垂直條來達到效果。

下面是如何做到這一點給你一個起點大綱：

• 創建形成你想要的曲線y-偏移的數組：

  // Just an example, you would define much better y-offsets! 
  // Hint: Better offsets can be had by fetching y-values from a quadratic curve. 
  
  var yOffsets=[0,1,2,3,4,5,6,5,4,3,2,1,0]; 
  

• 創建一個in-memory畫布：

  var canvas=document.createElement('canvas') 
  var context=canvas.getContext('2d'); 
  

• 使用的context.drawImage裁剪版本來繪製圖像的1個像素寬的垂直片，用「彎曲」的y偏移：

  for(var x=0;x<offsetY.length;x++){ 
      context.drawImage(img, 
       // clip 1 pixel wide slice from the image 
       x,0,1,img.height, 
       // draw that slice with a y-offset 
       x,offsetY[x],1,img.height 
      );   
  } 
  

• 創建從臨時畫布的圖像，並創建在FabricJS的圖像對象：

  var perspectiveImage=new Image(); 
  perspectiveImage.onload=function(){ 
      // This is the mug-shaped image you wanted! 
      // Use it in FabricJS as desired. 
  } 
  perspectiveImage.src=canvas.toDataURL();