Fabric js代码不适用于最新版本

Question

你好，我找到了这个 JS fiddle (http://jsfiddle.net/efmbrm4v/2/)，我真的需要这样的东西才能工作。在小提琴中使用了旧版本的fabric js（1.4.0），我无法让它在新版本（4.4.0）中工作。使用新版本，上传的图像不会保留在创建的 clippingRect 中，但它在整个画布上可见，我需要它仅在 clippingRect 对象中保持可见。有谁知道我应该在代码中更改什么以使其在最新版本上运行？提前致谢。

这是小提琴的代码：

$(document).ready(function() {
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
});

var canvas = new fabric.Canvas('myCanvas');

var clippingRect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: '#DDD',
    opacity: 1,
    selectable: false
});
canvas.add(clippingRect);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.onload = function() {

            var instanceWidth, instanceHeight;

            instanceWidth = img.width;
            instanceHeight = img.height;

            var imgInstance = new fabric.Image(img, {
                width: instanceWidth,
                height: instanceHeight,
                top: (canvas.getHeight() / 2 - instanceHeight / 2),
                left: (canvas.getWidth() / 2 - instanceWidth / 2),
                originX: 'left',
                originY: 'top'
            });
            canvas.add(imgInstance);
            imgInstance.clipTo = function(ctx) {
                ctx.save();
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                
                clippingRect.render(ctx);
                
                ctx.restore();
            };
            canvas.renderAll();
        };
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
}

<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black"></canvas>
<br />
<label>Choose a File:</label>
<br/>
<br />
<input type="file" id="imageLoader" name="imageLoader" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 1

您链接到的示例使用 Fabric 的旧 clipTo 方法，该方法已被更简单、更强大的 clipPath 系统所取代。

以下是关于如何使用 clipPaths 剪辑对象的 4 部分教程系列。

• http://fabricjs.com/clippath-part1
• http://fabricjs.com/clippath-part2
• http://fabricjs.com/clippath-part3
• http://fabricjs.com/clippath-part4