Fabric.js 将画布(或对象组)剪辑到多边形
Posted
技术标签:
【中文标题】Fabric.js 将画布(或对象组)剪辑到多边形【英文标题】:Fabric.js Clip Canvas (or object group) To Polygon 【发布时间】:2013-09-19 22:30:48 【问题描述】:我在 Fabric.js 中绘制了一个画布,我正在向其中添加一组矩形,我想将这些矩形的边缘限制为一个组,使其不超出某个区域。
想象制作一件条纹 T 恤,条纹是使用一系列矩形制作的,我需要将它们保持为 T 恤的形状。
我认为最好将整个画布剪辑成 T 恤的形状,所以我添加到其中的任何东西都保留在 T 恤内,但我被卡住了。到目前为止,我只剪辑到基本的圆形和矩形。
谢谢
【问题讨论】:
我们可以将图像形状裁剪为图像形状吗? 【参考方案1】:您可以在canvas.clipTo
中渲染一个形状:)
我刚刚在kitchensink 中加载了一个随机的 SVG 形状并这样做了:
var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx)
shape.render(ctx);
;
如您所见,整个画布现在都被该 SVG 形状剪裁了。
【讨论】:
@simmisimmi 这是画布上的第一个项目 @kangax 你能给我举个例子吗? 我们能不能按图片形状裁剪成图片形状 画布裁剪工作完美,但这个 clipTo 函数也在裁剪画布的背景图像,我不希望它的背景图像被裁剪。 如果 SVG 中有多个路径,则此clipTo
不起作用。请参阅this 问题。【参考方案2】:
你也可以试试这个:http://jsfiddle.net/ZxYCP/198/
var clipPoly = new fabric.Polygon([
x: 180, y: 10 ,
x: 300, y: 50 ,
x: 300, y: 180 ,
x: 180, y: 220
],
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
);
您可以简单地使用 Polygon 进行剪辑。答案基于此问题中的@natchiketa 想法Multiple clipping areas on Fabric.js canvas
【讨论】:
以上是关于Fabric.js 将画布(或对象组)剪辑到多边形的主要内容,如果未能解决你的问题,请参考以下文章
在 Fabric.js 画布上集成 Flash 动画(或派生格式)