Question

我正在使用fabric.js库和html5 canvas。我必须使用svg中包含的对象剪辑图像。要求是图像应该根据svg中的相同对象结构添加，svg应该缩放以适合画布。所以我能够做到这一点，除了在图像蒙版（剪裁）后，有不必要的空间。换句话说，图像未被正确遮罩。请看小提琴

Fiddle

我使用字符串加载了svg。然后将所有对象分组并缩放以适合画布。在我解开之后。

var str = '<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> <g>  <title>Layer 1</title>  <rect id="svg_1" height="138" width="214" y="51" x="49" fill="#FF0000"/>  <ellipse ry="105.500002" rx="104.000009" id="svg_2" cy="333.500002" cx="157.000009" fill="#FF0000"/> </g></svg>';
var items;
fabric.loadSVGFromString(str, function(objects, options) {
    var groups = new fabric.Group(objects);
        groups.scaleToHeight(canvas.height);
    canvas.centerObject(groups);
        canvas.add(groups); 

    items = groups._objects;
        groups._restoreObjectsState();
        canvas.remove(groups);

    for(var i = 0; i < items.length; i++) {
          canvas.add(items[i]);
          items[i].set('selectable', false);
        }
        canvas.renderAll();
});

添加图像时，我会按所选对象（此处为[0]项）屏蔽它。

var imageUrl = 'http://fabricjs.com/assets/pug_small.jpg';
    $('#btn-add').click(function(){
        fabric.Image.fromURL(imageUrl, function (img) {
        img.set({
          left: items[0].left,
          top: items[0].top,
          width :items[0].getBoundingRect().width,
          height: items[0].getBoundingRect().height,                    
        });             
        img.clipTo = function(ctx) {
          items[0]._render(ctx);
        }               
        canvas.add(img).setActiveObject(img);
        canvas.renderAll();
      });
    });

Fabric.js图像剪辑无法按预期工作

0 个答案: