Javascript 使在画布上绘制的形状不可移动（fabric.js）
今天我开始使用Javascript 使在画布上绘制的形状不可移动（fabric.js）,javascript,html,canvas,fabricjs,Javascript,Html,Canvas,Fabricjs,今天我开始使用fabric.js在画布上使用不同的模式进行绘制。这意味着当我点击lines按钮时，我将能够在画布上绘制直线。当我按下矩形按钮时，我将能够绘制矩形，并使用徒手按钮绘制矩形。我能画出所有的画 问题来了。一旦我画了任何形状，并试图在旧形状附近画一些其他东西，以前的形状就会变得可移动 这是我的密码 <%@ taglib uri="/struts-tags" prefix="s" %> <html> <head> <style>
fabric.js<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
<style>
#myCanvas { background:url("images/<s:property value="userImageFileName"/>") ;
background-size: 100% 100%;
background-repeat: no-repeat;}
</style>
<script type="text/javascript" src="fabric.js"></script>
<script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
<img id="result" src="images/<s:property value="userImageFileName"/>" hidden="true" width="565" height="584" class="annotatable"/>
<canvas id="myCanvas" width="565" height="584" style="border:1px solid #d3d3d3;">Please use a modern browser like Firefox, Chrome, Safari</canvas>
<div >Choose Color</div>
<input class="color" id="selectedColor">
<input type="button" value="rectangles" onClick="operate('rectangles')">
<input type="button" value="freehand" onClick="operate('freehand')">
<input type="button" value="lines" onClick="operate('lines')">
<input type="submit" value="save" onClick="save()">
<br>
<canvas id="canvas2" width="565" height="584"></canvas>
<img id="canvasImg" alt="No annotated image found">
<script>
var canvas = new fabric.Canvas('myCanvas', { selection: false });
var drawRectangle = false;
var color;
function operate(mode)
{
var line, mouseClicked = false;
canvas.on('mouse:down', function(o)
{
mouseClicked = true;
var pointer = canvas.getPointer(o.e);
color=document.getElementById("selectedColor").value;
if(mode=="freehand")
{
canvas.isDrawingMode = true;
drawRectangle = false;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#'+color;
}
else if(mode=="lines")
{
canvas.isDrawingMode = false;
drawRectangle = false;
var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
line = new fabric.Line(points, {
strokeWidth: 5,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center'
});
canvas.add(line);
}
else if(mode=="rectangles")
{
canvas.isDrawingMode = false;
drawRectangle = true;
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x-origX,
height: pointer.y-origY,
angle: 0,
transparentCorners: false,
stroke: "red",
fill:"transparent",
strokeWidth: 5
});
canvas.add(rect);
}
});
canvas.on('mouse:move', function(o)
{
if (!mouseClicked) return;
var pointer = canvas.getPointer(o.e);
if(mode=="lines")
{
line.set({ x2: pointer.x, y2: pointer.y });
canvas.renderAll();
}
else if(mode=="rectangles")
{
if(origX>pointer.x){
rect.set({ left: Math.abs(pointer.x) });
}
if(origY>pointer.y){
rect.set({ top: Math.abs(pointer.y) });
}
rect.set({ width: Math.abs(origX - pointer.x) });
rect.set({ height: Math.abs(origY - pointer.y) });
canvas.renderAll();
}
});
canvas.on('mouse:up', function(o){
mouseClicked = false;
});
}
function save(){
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var img=document.getElementById("result");
context2.drawImage(img, 0, 0, 565, 584);
context2.drawImage(canvas, 0, 0);
var canvasData = canvas2.toDataURL();
//document.write(dataURL);
document.getElementById('canvasImg').src = canvasData;
};
</script>
</body>
</html>
#myCanvas{background:url（“images/”）；
背景大小：100%100%；
背景重复：无重复；}
“hidden=“true”width=“565”height=“584”class=“可注释”/>
请使用Firefox、Chrome、Safari等现代浏览器
选择颜色
保存fabric.js在图像中，你可以看到形状的轮廓，它允许我移动那个形状。但是我不想要它。< /P> < P> HMM，它看起来有点贵，但是考虑将画布上的所有其他对象设置为其<代码>可选择的< /代码>或<代码> EV/<代码>属性设置为<代码> false 。确保它们在绘图时不会对任何鼠标输入做出反应
selectableevents就您的
save（）toDataURL（）常规HTML5画布API的fabric.Canvas上下文或类似内容。谢谢您的回答，但我停止使用fabric，因为在一天结束时，我了解到fabric中没有橡皮擦，很难编写和保存它。