Fabric JS html 5图像弯曲选项

问题描述

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

I want to make image curve with html5 tool.

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

I am using Fabric.js for the html5 canvas tool.

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

Please guide me on how to make curved image on image like mug, glass, cylindrical or circular type of products.

参考。图片如下：

推荐答案

你是什么欲望被称为透视扭曲，并且在原生2D画布中不可用。

您可以通过绘制1像素宽的垂直条带来实现效果使用适当的Y偏移量。

You can achieve your effect by drawing 1 pixel wide vertical strips of your image with the appropriate Y-offsets.

以下是如何做到这一点的大纲，为您提供一个起点：

Here's an outline of how to do it to give you a starting point:

• 创建一个形成所需曲线的y偏移数组：

• Create an array of y-offsets that form your desired curve:

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

创建内存中的画布：

Create an in-memory canvas:

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

使用裁剪版 context.drawImage 用弯曲y偏移绘制图像的1像素宽垂直切片：

Use the clipping version of context.drawImage to draw 1 pixel wide vertical slices of the image with "curving" y-offsets:

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：

Create an image from the temporary canvas and create an image object in 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();

这篇关于Fabric JS html 5图像弯曲选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！