Javascript Fabric JS html 5图像弯曲选项

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

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

请指导我如何在像杯子、玻璃、圆柱形或圆形产品这样的图像上制作曲线图像

参考图片如下：

---

您想要的被称为“透视扭曲”，在本机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
      );           
  }
  

---

抱歉，这不符合回答条件，但我的销售代表不允许我发表评论。 只是对markE极好的回答的一点补充： 圆柱体/圆的透视扭曲看起来像椭圆，而不是二次函数。计算椭圆y偏移的一种方法是：

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

---

其中，

radius

为“杯子”直径的一半，

radius

为最大垂直偏移

x

必须在“杯子”的水平中点处调整为“0”（零）。

AFAIK画布API中没有类似的设置，因此您必须使用getImageData并自己进行像素级操作。您是如何从二次曲线计算y值的，前面的Stackoverflow Q&A演示了如何沿二次曲线计算点。

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