Нарисуйте изображение внутри фигуры с помощью Fabricjs

В настоящее время я работаю над манипулированием изображениями на холсте и Javascript. Я использую для этого Fabric.js. Я просто хочу, чтобы пользователь загрузил изображение и объединил его с предоставленным нами шаблоном. т.е.,

Шаблон

Я хочу, чтобы загруженное изображение отображалось только в пустом круге в центре, и их можно настроить, перетащив его.

  • Если я оставлю шаблон в качестве верхнего слоя, пользователь не сможет перетаскивать и настраивать, поскольку холст заполнен шаблоном.
  • Если я оставлю загруженное изображение в качестве верхнего слоя, то изображение переполнит круг.

Как я могу решить эту проблему, предоставив моему пользователю простой в использовании интерфейс? Я пробовал использовать функцию ClipTo в fabric.js, но она не работает с объектом изображения.


javascript html5-canvas fabricjs
person RSK    schedule 03.12.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Я думаю, что вам нужен overlayImage.

Взгляните, например, на демонстрацию настройки:

Пример изображения наложения

var canvas = new fabric.Canvas('c13');
var circle = new fabric.Circle({ 
  radius: 30, 
  fill: '#f55', 
  top: 100, 
  left: 100 
});
canvas.add(circle);
canvas.setOverlayImage('../assets/jail_cell_bars.png', 
  canvas.renderAll.bind(canvas));
person kangax    schedule 10.12.2011
comment
Спасибо. Но могу ли я поместить текстовый объект поверх накладываемого изображения? - person RSK; 10.12.2011
comment
Не совсем. overlayImage предназначен для рисования поверх всего остального. Это простой вызов drawImage, который происходит в самом конце цикла рендеринга. Но если это изображение прозрачно посередине, вам действительно нужно, чтобы оно было сверху? Это будет выглядеть так, как будто любой контент в этой круглой области обрезается ею. - person kangax; 10.12.2011
comment
но моему приложению действительно требуется 3 слоя. 1) загруженное пользователем изображение, которое отображается только через прозрачную область шаблона (исходное изображение, о котором идет речь) 2) Шаблон похож на рассматриваемое изображение 3) текст поверх шаблона. Могу ли я нарисовать что-то на верхнем холсте в Fabricjs, не нарушая наложение изображения? - person RSK; 10.12.2011
comment
Да, это может быть немного сложно. Я не думал о таких случаях использования при разработке ткани. Вы можете использовать обратный вызов after:render и вручную рисовать что-то на canvas.contextContainer (например, используя собственный метод strokeText). Но не так просто визуализировать объекты ткани поверх. Может быть, с помощью некоторого хака создания текстового объекта, а затем вызова его метода _render в контексте contextContainer — textObj._render(canvas.contextContainer) (в обратном вызове after:render) или что-то в этом роде. - person kangax; 11.12.2011

arrow_upward
1
arrow_downward

Вы можете нарисовать как фотографию, так и шаблон на холсте. Я не уверен насчет fabric.js, но если бы вы напрямую вызывали функции холста, вы бы просто...

ctx = canvas.getContext('2d');
ctx.DrawImage(user_img, x,y);
ctx.DragImage(template_imb, 0, 0);

Когда пользователь перетаскивает мышь, обновляются x и y и перерисовываются оба слоя. Очевидно, убедитесь, что отверстие в шаблоне прозрачно. Вы можете добавить ширину и высоту к вызову DrawImage, если хотите, чтобы пользователь мог изменять размер изображения, просто предоставьте какой-то контроль над их изменением.

person Charles    schedule 03.12.2011

arrow_upward
0
arrow_downward

Более сложный метод — создать временный (закадровый) холст. Используя globalCompositeOperation=source-in, нарисуйте изображение поверх изображения маски, затем getImageData оттуда и putImageData на целевом холсте.

Но если вам подходит ответ Чарльза, все гораздо проще.

person James Clark    schedule 05.12.2011