我正在尝试制作一个 Canvas ，用户可以在其中绘制一些线条，也可以删除它们。一切工作正常，但是当我删除一些线然后尝试绘制其他线时，删除的线也变得可见。当鼠标按下时，删除的行变得可见。请帮我解决这个问题。
<html>
<script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#can").mousemove(function(e){handleMouseMove(e);});
})
</script>
<script type="text/javascript">
var arr_points = new Array();
var canvas;
var isDown;
function init() {
canvas = new fabric.Canvas('c', {
selection: false
});
canvas.on('mouse:down', function(o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
start_point_x = pointer.x;
start_point_y = pointer.y;
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 2,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
var pointer = canvas.getPointer(o.e);
var point_x = pointer.x;
var point_y = pointer.y;
arr_points.push([start_point_x,start_point_y,point_x,point_y]);
$(".canvas-container").append(
"<a class='remove_line' start_point_x='" + start_point_x + "' start_point_y='" + start_point_y + "' end_point_x='" + point_x +
"' end_point_y='" + point_y + "' href='#'><span style='position:absolute; left:" + (point_x + 10) + "px; top:" + (point_y - 7) + "px;'>X</span></a>"
)
isDown = false;
});
}
$(document).on('click','.remove_line',function(){
var len = arr_points.length;
var start_x = $(this).attr("start_point_x");
var start_y = $(this).attr("start_point_y");
var end_x = $(this).attr("end_point_x");
var end_y = $(this).attr("end_point_y");
for(i=0; i<len; i++){
if(start_x == arr_points[i][0] && start_y == arr_points[i][1] && end_x == arr_points[i][2] && end_y == arr_points[i][3]){
var temp_index = i;
}
}
arr_points.splice(temp_index, 1);
$(this).remove();
var canvas=document.getElementById("c");
var context=canvas.getContext("2d");
context.canvas.width = context.canvas.width;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
var newlen = arr_points.length;
for(i=0; i<newlen; i++){
context.beginPath();
context.strokeStyle ='red';
context.lineWidth = 2;
context.moveTo(arr_points[i][0],arr_points[i][1]);
context.lineTo(arr_points[i][2],arr_points[i][3]);
context.stroke();
context.closePath();
}
})
</script>
<body onload="init()">
<div><img src="sample.jpg" height="400" width="400" style="position:absolute;" /></div>
<canvas id="c" width="400" height="400" style="position:absolute;border:2px solid;"></canvas>
</body>
</html>
最佳答案
我调试了你的代码，发现你的canvas._object仍然有删除的行。因此，我稍微更改了您的代码，尝试一下，然后让我知道这是否有效。
<html>
<script type="text/javascript" src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#can").mousemove(function(e){handleMouseMove(e);});
})
</script>
<script type="text/javascript">
var arr_points = new Array();
var canvas;
var isDown;
function init() {
canvas = new fabric.Canvas('c', {
selection: false
});
canvas.on('mouse:down', function(o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
// console.log(pointer)
start_point_x = pointer.x;
start_point_y = pointer.y;
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 2,
fill: 'red',
stroke: 'red',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
var pointer = canvas.getPointer(o.e);
var point_x = pointer.x;
var point_y = pointer.y;
arr_points.push([start_point_x,start_point_y,point_x,point_y]);
$(".canvas-container").append("<a class='remove_line' array_index='"+canvas._objects.length+"' start_point_x='"+start_point_x+"' start_point_y='"+start_point_y+"' end_point_x='"+point_x+"' end_point_y='"+point_y+"' href='#'><span style='position:absolute; left:"+(point_x + 10)+"px; top:"+(point_y - 7)+"px;'>X</span></a>")
isDown = false;
});
$(document).on('click','.remove_line',function(){
var len = arr_points.length;
var start_x = $(this).attr("start_point_x");
var start_y = $(this).attr("start_point_y");
var end_x = $(this).attr("end_point_x");
var end_y = $(this).attr("end_point_y");
for(i=0; i<len; i++){
if(start_x == arr_points[i][0] && start_y == arr_points[i][1] && end_x == arr_points[i][2] && end_y == arr_points[i][3]){
var temp_index = i;
}
}
arr_points.splice(temp_index, 1);
$(this).remove();
var canvasT=document.getElementById("c");
var context=canvasT.getContext("2d");
context.canvas.width = context.canvas.width;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
var newlen = arr_points.length;
for(i=0; i<newlen; i++){
context.beginPath();
context.strokeStyle ='red';
context.lineWidth = 2;
context.moveTo(arr_points[i][0],arr_points[i][1]);
context.lineTo(arr_points[i][2],arr_points[i][3]);
context.stroke();
context.closePath();
}
var array_index = -1;
for(var i=0; i< canvas._objects.length; i++){
if(canvas._objects[i].x1 == start_x && canvas._objects[i].x2 == end_x && canvas._objects[i].y1 == start_y && canvas._objects[i].y2 == end_y){
array_index = i;
}
}
canvas._objects.splice(array_index, 1)
})
}
</script>
<body onload="init()">
<div><img src="sample.jpg" height="400" width="400" style="position:absolute;" /></div>
<canvas id="c" width="400" height="400" style="position:absolute;border:2px solid;"></canvas>
</body>
</html>
关于javascript - 在canvas html中绘制线条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44149884/