我想用html5工具制作图片曲线
我正在为 html5 Canvas 工具使用 Fabric.js。
请指导我如何在杯子、玻璃、圆柱形或圆形产品等图像上制作曲面图像。
引用。图片如下:
最佳答案
您想要的称为“透视变形”,在原生 2D Canvas 中不可用。
您可以通过使用适当的 Y 偏移绘制 1 像素宽的图像垂直 strip 来实现您的效果。
以下是如何做的概述,为您提供一个起点:
创建形成所需曲线的 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];
创建内存 Canvas :
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 ); }
从临时 Canvas 创建图像并在 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();
关于javascript - Fabric JS html 5 图像弯曲选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26403646/