html5画布中的套索工具 [英] Lasso tool in html5 canvas

问题描述

我正在尝试构建一个自由形式的套索工具来剪切画布内的图像。我正在使用 fabric.js 来绘制形状。

I'm trying to build a freeform lasso tool to clip an image inside canvas. I'm using fabric.js to draw the shape.

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
  });

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

  ctx.clip();

  ctx.drawImage(img, 0, 0);
}

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="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

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

这是我的尝试似乎不起作用，我在这里做错了什么？

This is my attempt which doesn't seem to work, what am I doing wrong here ?

任何人都可以帮助我吗？非常感谢。

Can anyone help me please? It would really be appreciated.

推荐答案

图片必须是 fabric.Image 。

您可以尝试这样的事情：

You could try something like this:

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://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

参见这些资源更多：

http ：// fabricjs.com/fabric-intro-part-1/

Multiple clipping areas on Fabric.js canvas

Fabric.js剪辑画布（或对象组）到多边形

这篇关于html5画布中的套索工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！