Fabric JS html 5图像弯曲选项

Question

我想用html5工具制作图像曲线.

我正在使用Fabric.js作为html5画布工具.

请指导我如何在图像上制作弯曲图像,如马克杯,玻璃杯,圆柱形或圆形产品.

参考.图片如下:

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];
  

• 创建内存中的画布:

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

• 使用剪切版本context.drawImage以"弯曲"y偏移绘制图像的1像素宽垂直切片:

  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();