Создание пятна или рисунка полосы в Fabric.js

Question

Я хочу заполнить многоугольник рисунком пятен или полосок. я могу найти множество примеров использования изображения в качестве шаблона, но не других форм или полигонов

Также в http://fabricjs.com/dynamic-patterns/ при регулировке угла картины он делает это из верхнего левого угла изображения/холста .. Любые способ сделать это из центра холста (так мопс вращается вокруг центра и не получает отрезана)

Answer 1

Я могу найти множество примеров использования изображения в качестве шаблона, но не другие формы или многоугольников ,

Используя тот же dynamic patterns demo, вам просто нужно будет заменить:

patternSourceCanvas.add(img); 

с:

patternSourceCanvas.add(yourShape); 

..making уверен, что полотно имеет соответствующие размеры. Как вы можете видеть, Fabric может использовать весь холст в памяти для визуализации шаблона, поэтому все, что вы добавляете на этот холст (включая формы SVG или простые фигуры или что-то еще), будет использоваться в качестве шаблона.

.. при регулировке угла рисунка он делает это из верхнего левого угла изображения/холста

При изменении originX/originY в «центр», образы мопса должны вращаться вокруг своих центров:

img.scaleToWidth(100).set({ 
    originX: 'center', 
    originY: 'center' 
});