HTML5画布中的套索工具

Question

HTML5画布中的套索工具

4

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

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>

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

请问有人可以帮我吗？非常感谢。

- Pontus

the question is missing - niyou

1

不错的开端，但请尝试解释一下你遇到了什么问题——是否有错误、是否无法正常工作、是否看起来不对等等。这将确保人们知道从何处开始回答问题。 - Chris Ballard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ekuusela · Accepted Answer

图片需要是一个fabric.Image。

你可以尝试像这样做：

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/

Fabric.js画布上的多个剪切区域

将Canvas（或对象组）剪切为多边形