当我在织物上使用自由绘图时，有时绘图会变得模糊!
这是一张演示问题的图片:
这是完整的代码:
var Operations = {
freeDrawing:0,
selection:1,
move:2,
erease:3
};
var Options = {
EraseBrush:"#ffffff",
DrawingBrushColor:'#005E7A',
DrawingBrushWidth:'16',
PrushPattern:'pencil',
EraserWidth:'24'
};
var BrushePatterns = {
Pencil:'pencil',
Circle:'circle',
Spray:'spray',
Pattern:'pattern',
HLine:'hline',
VLine:'vline',
Square:'square',
Diamond:'diamond',
Texture:'texture'
};
var app = (function(){
var application={};
var canvas = window.__canvas = new fabric.Canvas('board',{defaultCursor :'crosshair',isDrawingMode:true,selection:true});
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding:5});
canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
if (canvas.freeDrawingBrush) {
canvas.freeDrawingBrush.color = Options.DrawingBrushColor;
canvas.freeDrawingBrush.width = Options.DrawingBrushWidth;
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
blur: 0,
offsetX: 0,
offsetY: 0,
affectStroke: true,
color: Options.DrawingBrushColor,
});
}
canvas.on('mouse:down',function(e){
});
canvas.on('mouse:up',function(e){
});
canvas.on('mouse:move',function(e){
});
/* function resizeCanvas() {
setTimeout(()=>{
var canvasContainer=document.getElementById('ccontainer');
canvas.setHeight(canvasContainer.clientHeight);
canvas.setWidth(canvasContainer.clientWidth);
canvas.renderAll();
},500);
}*/
application.activateDrawingMode=function(){
toggleOperation(Operations.freeDrawing);
}
application.activateEraseMode = function(){
toggleOperation(Operations.erease);
}
application.activateMousePointerMode = function(){
toggleOperation(Operations.selection);
}
function toggleOperation(operation){
if(operation === Operations.freeDrawing){
/*canvas.isDrawingMode=true;
canvas.selection = false;
canvas.freeDrawingBrush.color = Options.DrawingBrushColor;
canvas.freeDrawingBrush.width = Options.DrawingBrushWidth;*/
}
else if(operation === Operations.erease){
canvas.selection = false;
canvas.freeDrawingBrush.color = Options.EraseBrush;
canvas.freeDrawingBrush.width = Options.EraserWidth;
}
else if(operation === Operations.selection){
canvas.isDrawingMode = false;
canvas.selection = true;
}
}
//resize on init
//resizeCanvas();
application.canvas=canvas;
return application;
})();
function freeDrawingButtonclicked(){
app.activateDrawingMode();
}
function pointerButtonClicked(){
app.activateMousePointerMode();
}
function eraserButtonClicked(){
app.activateEraseMode();
}
我用的是1.7.19版本的fabric，我有一个主页，里面既有fabric js文件，也有上面提到的文件。这些文件由 ASP.Net 核心 Web 应用程序使用。我看不出这段代码和那段代码有什么区别 http://fabricjs.com/freedrawing然而我的代码产生了这些模糊，我不知道为什么!
最佳答案
整晚拉扯我的头发后发现，如果您将 canvas.freeDrawingBrush.width 的值作为字符串传递，在引号 '14' 之间，您将得到这种模糊，但如果您将此值作为整数 14 传递，您将不会得到这种模糊。我认为这是一个错误，我将在 Fabric.JS GitHub 存储库中创建一个问题。不管怎样，我只是想让你知道问题出在哪里，所以我救了别人的头发。
干杯!
关于javascript - 在 Canvas 上自由绘图变得模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47513240/