我想用html5工具制作图像曲线。
我将Fabric.js用于html5 canvas工具。
请指导我如何在杯子,玻璃,圆柱或圆形类型的产品上制作弯曲图像。
参考 图片如下:
您想要的被称为“透视变形”,并且在本机2D画布中不可用。
您可以通过在图像上绘制1像素宽的垂直条纹(带有适当的Y偏移)来实现效果。
这是如何做的概述,以为您提供起点:
创建形成所需曲线的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] 删除。
我来说两句