Html5 Canvas + fabric.js 的独立堆肥

Posted 2023-03-25

【中文标题】Html5 Canvas + fabric.js 的独立堆肥

【英文标题】：Independed Compositing at Html5 Canvas + fabric.js

【发布时间】：2011-11-10 12:40:18

【问题描述】：

我需要用画布做如下图所示的事情。

用户将图像拖放到黄色边框的正方形上，而不是更改图像的大小位置。图像将被剪裁在黄色边框内。我想使用剪裁但是，当使用全局剪裁时。图像在其他部分运行。我该怎么办？我希望它们表现得像独立的剪辑区域。

【问题讨论】：

查看我的 answer 到 Multiple Clipping Areas on fabric js canvas 以获取使用 Fabric.js 执行此操作的示例

【参考方案1】：

也许下一个代码示例可以帮助你：

html：

<canvas id='test' width='400px' height='400px' style='background-color:orange;'>
</canvas>

脚本：

var imgRes=
    ['http://www.planethopia.info/wp-content/uploads/2010/02/space3.jpg',
     'http://www.star.ac.za/graphics/n11lmc_noao.jpg',
     'http://images.wikia.com/memoryalpha/en/images/5/54/Deep_space_9.jpg'];

var images=[new Image(),new Image(),new Image()];
for(var i=0;i<3;i++) 
    images[i].src=imgRes[i];


var ctx=document.getElementById("test").getContext("2d");

// image[0]
ctx.save();
ctx.beginPath();
ctx.rect(5,5,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[0],0,0);
ctx.restore();

// image[1]
ctx.save();
ctx.beginPath();
ctx.rect(5,205,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[1],0,0);
ctx.restore();

// image[2]
ctx.save();
ctx.beginPath();
ctx.rect(205,5,190,390);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[2],0,0);
ctx.restore();

http://jsfiddle.net/MsSzz/

更新：http://jsfiddle.net/MsSzz/1/

【讨论】：

哇，太好了，感谢您的回复。我了解您在执行每个剪辑操作之前都在保存状态。但是，我认为用这种方法移动或调整图像大小是不可能的？

没有。在上面的示例中，我只是在画布的 point(0,0) 处绘制图像。但是您可以移动、调整大小、转换图像、线条、文本。保存和恢复适用于上下文。如果您在调用.save 后在.clip、transform、translate、scale、rotate 的帮助下更改上下文，您可以通过简单地调用.restore 来恢复先前的上下文状态.在 MDN 中阅读：developer.mozilla.org/en/Canvas_tutorial/Transformations 您必须记住，您的 clip、transform... 不适用于图像、文本、线条...，而是用于上下文。

@Mirat Can Bayrak - 请参阅答案中的更新链接。