Нарисуйте новый путь под оверлейным изображением - PullRequest
Новая
       20

Нарисуйте новый путь под оверлейным изображением

0 голосов
/ 20 апреля 2020

Когда я рисую новый путь в fabri c. js isDrawingMode: true (справа на скриншоте), я хочу, чтобы он появлялся под моим наложенным изображением, то есть прозрачным png.

enter image description here

        var canvas = this.__canvas = new fabric.Canvas('c', {
            isDrawingMode: true,
            preserveObjectStacking: true
        });


        var img = fabric.Image.fromURL(imgUrl, function(oImg) {
            oImg.scaleToWidth(canvas.getWidth());
            oImg.id="OverlayImage";
            canvas.setOverlayImage(oImg, canvas.renderAll.bind(canvas));
        });

Это работает, как только я заканчиваю sh путь, хотя.

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

Есть идеи, как это решить!

https://codepen.io/localhorst/pen/zYvKWqo

1 Ответ

1 голос
/ 23 апреля 2020

решение 100% fabri c подразумевает, что не следует использовать fabri c brush / freeDrawingMod. Вы можете создать свой путь прорисовки и добавить его на холст в качестве объекта fabri c, отслеживая mousedown и mousemove, обновляя ваш объект fabri c path каждый mousmove. Есть хорошее объяснение для создания объекта пути в конце страницы: http://fabricjs.com/fabric-intro-part-1

Более простым решением было бы установить изображение как элемент html, расположенный поверх холст. с отключенными событиями указателя на изображении, вы можете щелкнуть по нему и нарисовать на холсте fabri c.

из своего кодового маркера: 

<div class="row">
    <img class="overlay" src="https://sandmoshi.github.io/eColorBook/pages/fox-trans.png"/>
    <div class="col-8">
            <canvas id="c" height="600" width="800" style="border:1px solid #aaa;"></canvas>
        </div>
...

.overlay{
  position:absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

Я перетянул вашу ручку в продемонстрировать: https://codepen.io/TheNils/pen/QWjdEOR

...