我想创建一个宽 300 像素、高 200 像素的组,然后在该组内加载一些内容。当我加载大于组尺寸的图像时,它会在组外出血。我喜欢“裁剪”图像(类似于 CSS 溢出:隐藏属性)。
这可能吗?
最佳答案
要完成您的任务,您应该使用 clipTo图像上的 clipTo
函数,组上的 clipTo
函数已经有 open bug ,顺便说一句,您可以通过将组的尺寸和位置转置为 ClipTo 函数来解决此问题:
clipTo :Function § Function that determines clipping of an object (context is passed as a first argument) Note that context origin is at the object's center point (not left/top corner)
查看 official demo ,然后在对图像进行剪辑操作后,您可以将其添加到组中(运行下面的脚本以查看示例)。
var canvas = window.__canvas = new fabric.Canvas('c');
var path = 'http://fabricjs.com/lib/pug.jpg';
var _img = new Image();
_img.onload = function(img) {
var dog = new fabric.Image(_img, {
left: 100,
top: 100,
width: 300,
height: 300,
selectable: false,
clipName: 'dog',
clipTo: function(ctx) {
ctx.rect(0, 0, 50, 50);
}
});
var group = new fabric.Group([dog], {
left: 100,
top: 100,
width: 100,
height: 100,
borderColor: 'black',
});
canvas.add(group);
};
_img.src = path;
canvas.renderAll();
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<canvas id="c" height="300" width="300" style="border:1px dashed #333;"></canvas>
关于javascript - 在 Fabric.js 中使用组作为掩码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29294340/