javascript - 为什么当我将光标移出画布时我的绘图变得不可见?
问题描述
我正在使用fabric.js
构建自定义 T 恤设计面板。我有上传图片,输入文本等选项,效果很好。但是当我从库中添加绘图工具的 JavaScript 代码时fabric.js
,遇到了一些问题:
绘制任何内容后,如果我将光标移出画布,则绘图不可见。如果我在画布中单击返回,它是可见的。
如果我上传图像,它在画布中可见,但在我单击画布时消失。
如果我注释掉这部分代码,所有问题都消失了,但在画布上绘制任何东西都是必须的!
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,
});
}
})();
解决方案
绘图模式存在一个已知错误,即如果未触发 freeDrawingBrush.onMouseUp() 事件,则刚刚绘制的绘图中的点不会转换为路径。
每当您从绘图控件切换绘图模式时,请确保调用
canvas.freeDrawingBrush.onMouseUp();
这是一个片段,可让您对该方法的调用进行转换。随着它的关闭,该行将被擦除。切换为 ON 时,线路被保留。
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>
推荐阅读
- linux - 一个关于使用信号量执行线程的操作系统作业问题
- javascript - 遍历对象以创建对象数组的方法
- java - 我的媒体播放器(安卓)有问题
- sql - 这是否被归类为复合主键?
- python - 选择名称类似于列表中字符串的熊猫数据框列
- python - 散点图矩阵,输入与输出
- c++ - 并发问题:如何只有一个线程通过临界区
- python-3.x - 如何在 Python 上使用未知常量对数字进行舍入
- c++ - Boost::log 仅在 debian 中崩溃
- javascript - 找不到方法 formatDate((class),string,object)。(第 54 行,文件“代码”)