Используйте группу в качестве маски в fabric.js

Question

Я хочу создать группу шириной 300 пикселей и высотой 200 пикселей, а затем загрузить несколько вещей внутри этой группы. Когда я загружаю изображения, размер которых больше размеров группы, он выходит за пределы группы. Я бы хотел «обрезать» изображение (похожее на переполнение CSS: скрытое свойство).

Возможно ли это?

Answer 1

Чтобы выполнить свою задачу, вы должны использовать функцию clipTo на вашем изображение, clipTo функции на группу уже есть open bug, кстати, вы можете работать вокруг там, по транспонировать размер и положение вашей группы к функции clipTo:

clipTo: Функция § Функция, которая определяет, отсечение объекта (контекст передается в качестве первого аргумента) Обратите внимание, что контекст происхождения находится в центральной точки объекта (не левый/верхний угол)

Взгляните на official demo, затем после операции клипа на вашем изображении вы можете добавить его в группу (запустите сценарий ниже, чтобы увидеть пример).

var canvas = window.__canvas = new fabric.Canvas('c'); 
 
var path = 'http://fabricjs.com/lib/pug.jpg'; 
 

 
var _img = new Image(); 
 
_img.onload = function(img) { 
 
    var dog = new fabric.Image(_img, { 
 

 
    left: 100, 
 
    top: 100, 
 
    width: 300, 
 
    height: 300, 
 
    selectable: false, 
 
    clipName: 'dog', 
 
    clipTo: function(ctx) { 
 
     
 
     ctx.rect(0, 0, 50, 50); 
 
    } 
 
    }); 
 

 
    var group = new fabric.Group([dog], { 
 
    left: 100, 
 
    top: 100, 
 
    width: 100, 
 
    height: 100, 
 
    borderColor: 'black', 
 
    }); 
 

 
    canvas.add(group); 
 
}; 
 
_img.src = path; 
 

 

 
canvas.renderAll();

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script> 
 
<canvas id="c" height="300" width="300" style="border:1px dashed #333;"></canvas>