Fabric JS html 5图像弯曲选项

debugcn 发表于 Dev

Ashishbhattb

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

我将Fabric.js用于html5 canvas工具。

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

参考图片如下：

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

品牌

您想要的被称为“透视变形”，并且在本机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();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。