html5 canvas 中的套索工具 - 用 clipPath 替换 clipTo 函数

Question

下面显示的代码来自this post。它在使用 fabric.js/1.4.0 时工作正常，但是当我将 fabric.js 更新到 2.4.3 时，它无法运行。问题在于 clipTo 函数已被称为 clipPath 的新函数所取代。有谁知道如何更新此代码以使其与 clipPath 一起使用？我已经浏览了 clipPath 的文档并搜索了 Google 和 Whosebug 将近 2 天，但我仍然迷路了。

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);

    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(imgInstance);
        OwnCanv.remove(path);
        OwnCanv.clipTo = function(ctx) {
            path.render(ctx);
        };
        OwnCanv.add(imgInstance);
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

Answer 1

好的，所以创建后的路径已经被缓存了。您需要做的是使用 'set' 方法将填充设置为不为空的颜色。然后将路径设置为 canvas 或对象本身的 clipPath。

如果你只想为对象设置它，你需要重新计算它的正确位置。

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);
    OwnCanv.controlsAboveOverlay = true;
    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        path.set('fill', 'black');
        console.log(path)
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(path);
        OwnCanv.clipPath = path;
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

Answer 2

路径上的 false 需要 objectCaching。在这里查看：https://jsfiddle.net/jw6rLx5f/2/

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);

    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        path.objectCaching= false;
       
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(imgInstance);
        OwnCanv.remove(path);
        OwnCanv.clipTo = function(ctx) {
          ctx.save();
            path.render(ctx);
            ctx.restore();
        };
      
        OwnCanv.add(imgInstance);
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>

html5 canvas 中的套索工具 - 用 clipPath 替换 clipTo 函数

Lasso tool in html5 canvas - replacing the clipTo function with clipPath

fabricjs