Почему мой рисунок становится невидимым, когда я убираю курсор с холста?

Question

Я использую fabric.js для создания пользовательской панели дизайна футболки.У меня есть загрузка изображения, ввод текста и т. Д. Параметры, которые работают просто отлично.Но когда я добавил JavaScript-код инструмента рисования из библиотеки fabric.js и столкнулся с несколькими проблемами:

1. После рисования чего-либо, если я уберу курсор с холста, рисунок не будет виден,Если я щелкну обратно на холсте, он станет видимым.

2. Если я загружу изображение, оно будет видно на холсте, но исчезнет, ​​когда я нажму на холст.

Все проблемы исчезнут, если я закомментирую эту часть кода, но поскольку это обязательно для рисования чего-либо на холсте!

var canvas = this.__canvas = new fabric.Canvas('tcanvas', {
isDrawingMode: false
});

Я добавляю изображения и код JS для инструмента рисования.

            (function() {
            var $ = function(id){return document.getElementById(id)};

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

            fabric.Object.prototype.transparentCorners = false;

            var drawingModeEl = $('drawing-mode'),
                drawingOptionsEl = $('drawing-mode-options'),
                drawingColorEl = $('drawing-color'),
                drawingShadowColorEl = $('drawing-shadow-color'),
                drawingLineWidthEl = $('drawing-line-width'),
                drawingShadowWidth = $('drawing-shadow-width'),
                drawingShadowOffset = $('drawing-shadow-offset'),
                clearEl = $('clear-canvas');

            clearEl.onclick = function() { canvas.clear() };

            drawingModeEl.onclick = function() {
                canvas.isDrawingMode = !canvas.isDrawingMode;
                if (canvas.isDrawingMode) {
                drawingModeEl.innerHTML = 'Cancel drawing mode';
                drawingOptionsEl.style.display = '';
                }
                else {
                drawingModeEl.innerHTML = 'Enter drawing mode';
                drawingOptionsEl.style.display = 'none';
                }
            };

            if (fabric.PatternBrush) {
                var vLinePatternBrush = new fabric.PatternBrush(canvas);
                vLinePatternBrush.getPatternSrc = function() {

                var patternCanvas = fabric.document.createElement('canvas');
                patternCanvas.width = patternCanvas.height = 10;
                var ctx = patternCanvas.getContext('2d');

                ctx.strokeStyle = this.color;
                ctx.lineWidth = 5;
                ctx.beginPath();
                ctx.moveTo(0, 5);
                ctx.lineTo(10, 5);
                ctx.closePath();
                ctx.stroke();

                return patternCanvas;
                };

                var hLinePatternBrush = new fabric.PatternBrush(canvas);
                hLinePatternBrush.getPatternSrc = function() {

                var patternCanvas = fabric.document.createElement('canvas');
                patternCanvas.width = patternCanvas.height = 10;
                var ctx = patternCanvas.getContext('2d');

                ctx.strokeStyle = this.color;
                ctx.lineWidth = 5;
                ctx.beginPath();
                ctx.moveTo(5, 0);
                ctx.lineTo(5, 10);
                ctx.closePath();
                ctx.stroke();

                return patternCanvas;
                };

                var squarePatternBrush = new fabric.PatternBrush(canvas);
                squarePatternBrush.getPatternSrc = function() {

                var squareWidth = 10, squareDistance = 2;

                var patternCanvas = fabric.document.createElement('canvas');
                patternCanvas.width = patternCanvas.height = squareWidth + squareDistance;
                var ctx = patternCanvas.getContext('2d');

                ctx.fillStyle = this.color;
                ctx.fillRect(0, 0, squareWidth, squareWidth);

                return patternCanvas;
                };

                var diamondPatternBrush = new fabric.PatternBrush(canvas);
                diamondPatternBrush.getPatternSrc = function() {

                var squareWidth = 10, squareDistance = 5;
                var patternCanvas = fabric.document.createElement('canvas');
                var rect = new fabric.Rect({
                    width: squareWidth,
                    height: squareWidth,
                    angle: 45,
                    fill: this.color
                });

                var canvasWidth = rect.getBoundingRect().width;

                patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
                rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });

                var ctx = patternCanvas.getContext('2d');
                rect.render(ctx);

                return patternCanvas;
                };

                var img = new Image();
                img.src = '../assets/honey_im_subtle.png';

                var texturePatternBrush = new fabric.PatternBrush(canvas);
                texturePatternBrush.source = img;
            }

            $('drawing-mode-selector').onchange = function() {

                if (this.value === 'hline') {
                canvas.freeDrawingBrush = vLinePatternBrush;
                }
                else if (this.value === 'vline') {
                canvas.freeDrawingBrush = hLinePatternBrush;
                }
                else if (this.value === 'square') {
                canvas.freeDrawingBrush = squarePatternBrush;
                }
                else if (this.value === 'diamond') {
                canvas.freeDrawingBrush = diamondPatternBrush;
                }
                else if (this.value === 'texture') {
                canvas.freeDrawingBrush = texturePatternBrush;
                }
                else {
                canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas);
                }

                if (canvas.freeDrawingBrush) {
                canvas.freeDrawingBrush.color = drawingColorEl.value;
                canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
                canvas.freeDrawingBrush.shadow = new fabric.Shadow({
                    blur: parseInt(drawingShadowWidth.value, 10) || 0,
                    offsetX: 0,
                    offsetY: 0,
                    affectStroke: true,
                    color: drawingShadowColorEl.value,
                });
                }
            };

            drawingColorEl.onchange = function() {
                canvas.freeDrawingBrush.color = this.value;
            };
            drawingShadowColorEl.onchange = function() {
                canvas.freeDrawingBrush.shadow.color = this.value;
            };
            drawingLineWidthEl.onchange = function() {
                canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1;
                this.previousSibling.innerHTML = this.value;
            };
            drawingShadowWidth.onchange = function() {
                canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0;
                this.previousSibling.innerHTML = this.value;
            };
            drawingShadowOffset.onchange = function() {
                canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0;
                canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0;
                this.previousSibling.innerHTML = this.value;
            };

            if (canvas.freeDrawingBrush) {
                canvas.freeDrawingBrush.color = drawingColorEl.value;
                canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
                canvas.freeDrawingBrush.shadow = new fabric.Shadow({
                blur: parseInt(drawingShadowWidth.value, 10) || 0,
                offsetX: 0,
                offsetY: 0,
                affectStroke: true,
                color: drawingShadowColorEl.value,
                });
            }
            })();

Answer 1

Существует известная ошибка с режимом рисования, заключающаяся в том, что если событие freeDrawingBrush.onMouseUp () не запущено, то точки на только что сделанном чертеже не преобразуются в контур.

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

canvas.freeDrawingBrush.onMouseUp();

Вот фрагмент кода, который позволяет переключить вызов этого метода.При выключенном состоянии линия стирается.При включенном переключателе линия сохраняется.

var canvas = new fabric.Canvas("c");

var toggleVal = 1;
$('#toggle').on('click', function(e){
  toggleVal = (toggleVal === 1 ? 0 : 1);
  $(this).html((toggleVal === 1 ? 'On' : 'Off'));
  $(this).val(toggleVal)
  clearTimeout(timer);
  reset();
})

var timer;
function reset() {
canvas.clear();  
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "green";
canvas.freeDrawingBrush.width = 4;
timer = setTimeout(stop_drawing, 3000);
  
}

function stop_drawing() {
  
  canvas.isDrawingMode = false;

  if (toggleVal == 1){
    canvas.freeDrawingBrush.onMouseUp(); 
  }
}

reset();

div
{
  background-color: silver;
  width: 600px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<p>Click the canvas and draw a line. Shortly the timeout fires and drawing stops. Now click the canvas again.</p>
<p>The toggle button toggles mouse-up catching - off makes your line dissapear on next canvas click,<br />whilst on works more intuitively <button id='toggle' >On</button></p>
<div>
<canvas id="c" width="600" height="300"></canvas>
</div>