FabricJS ClipTo с изображением или SVG Как граница холста

Question

Как использовать clipTo с изображением или SVG? Я хочу ограничить любые объекты выходящими за рамки контура/образа SVG.

Я пытаюсь выполнить что-то похожее на this OP, однако ответы мне пока не показались, как это сделать.

я могу использовать clipTo с регулярной формой, например:

 var circle = new fabric.Circle({ 
      radius: 150, 
      stroke: '#f55', 
      fill: "transparent", 
      top: 50, 
      left: 50 
     }); 
     circle.selectable = false; 
     canvas.add(circle); 
     canvas.clipTo = function (ctx) { 
      circle.render(ctx); 
     }; 

Смотрите эту скрипку рабочий пример: http://jsfiddle.net/o9f4dqjn/1/

Однако я не могу получить эту работу с изображением. Это возможно?

Answer 1

Хотя это решение не использует clipTo, оно работает.

От: https://github.com/kangax/fabric.js/issues/2313

И моя модифицированной рабочей скрипки: http://jsfiddle.net/w396uhnv/

В основном вам нужно установить фоновое изображение, а затем установить yourobject.globalCompositeOperation = 'source-atop'; на объекте.

Обратите внимание, что фоновое изображение должно иметь прозрачный фон, но непрозрачную заливку.

---

я мог бы получить метод clipTo работать с SVG только (не изображение):

 fabric.loadSVGFromURL('http://fabricjs.com/assets/23.svg', function (objects, options) { 
      var shape = fabric.util.groupSVGElements(objects, options); 
      canvas.clipTo = function (ctx) { 
       shape.render(ctx); 
      }; 
      canvas.renderAll(); 
     }); 

Fabric.js Clip Canvas (or object group) To Polygon