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

Answer 2

抱歉，这并不能作为答案，但我的代表不允许我发表评论。 只是对markE出色答案的一小部分补充： 圆柱/圆的透视变形看起来像一个椭圆，而不是二次函数。计算椭圆 y 偏移的一种方法是：

const offsetY = (x, radiusA, radiusB) => {
    return radiusB * Math.sqrt(1 - (x * x) / (radiusA * radiusA));
  };

其中radiusA 是例如直径的一半'mug'，radiusB 是最大垂直偏移量。 x 必须在“杯子”的水平中点处调整为“0”（零）。