Круглая рамка Fabric.js поверх изображения

Мне нужно реализовать функцию рисования изображения по кругу на холсте. Я использую Fabric.js, но не могу найти решения. На самом деле, когда изображение рисуется по кругу, оно не должно выходить за пределы изображения, а также иметь возможность размещать изображение по кругу.


javascript fabricjs
person user3869081    schedule 11.10.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны применить свойство ClipTo к своему изображению. Затем ClipTo будет определять размер круга, который вы будете обрезать вокруг изображения.

Вот пример с сайта Fabric.js: http://fabricjs.com/clipping/

clipTo: function (ctx) {
  ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}

Однако этот пример представляет собой прямое отсечение и не включает возможность перемещения изображения внутри круга, потому что круг и область отсечения по сути являются одним объектом.

Я проделал некоторую работу по созданию области отсечения с возможностью перемещения изображения внутри нее с помощью FabricJS. Вот пример того, как я реализовал это для прямоугольника. Вам придется изучить его для более глубоких кругов, поскольку я еще не полностью вычистил этот пример. http://jsfiddle.net/PromInc/ZxYCP/

person PromInc    schedule 12.10.2014