我是HTML5 Canvas&JavaScript,我正在尝试绘制多个鼠标单击,在文件上上传图像上移动矩形,如何做到这一点?我尝试了一些想法,但是当我在图像画布上绘制矩形时,图像突然消失了。
在这里,这是我的代码:
<script>
(function() {
var canvas = new fabric.Canvas('panel');
var line, isDown, startPosition={}, rect,drawingMode=true;
canvas.on('mouse:down', function(event){
if (!drawingMode) return;
isDown = true;
console.log(event.e.clientX,event.e.clientY);
startPosition.x=event.e.clientX;
startPosition.y=event.e.clientY;
console.log(startPosition);
rect=new fabric.Rect({
left:event.e.clientX,
top:event.e.clientY,
width:0,
height:0,
stroke:'red',
strokeWidth:3,
fill:''
});
canvas.add(rect);
});
canvas.on('mouse:move', function(event){
if (!isDown || !drawingMode) return;
rect.setWidth(Math.abs( event.e.clientX-startPosition.x ));
rect.setHeight(Math.abs( event.e.clientY -startPosition.y ));
canvas.renderAll();
});
canvas.on('mouse:up', function(){
isDown = false;
canvas.add(rect);
// window.alert("hi");
});
canvas.on('object:selected', function(){
drawingMode = false;
});
canvas.on('object:selected', function(){
drawingMode = false;
});
canvas.on('selection:cleared', function(){
drawingMode = true;
});
})();
</script>
<input type='file' id="fileUpload" onChange="readURL(this);" accept="image/*" style="margin-top: 30px; margin-left: 80px;" >
<script>
function el(id){return document.getElementById(id);} // Get elem by ID
var canvas = el("panel");
var context = canvas.getContext("2d");
function readImage() {
if ( this.files && this.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
var img = new Image();
img.addEventListener("load", function() {
context.drawImage(img, 0, 0, 700, 450);
});
img.src = e.target.result;
};
FR.readAsDataURL( this.files[0] );
}
}
el("fileUpload").addEventListener("change", readImage, false);
</script>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title></title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="column1">
<canvas id="panel" width="700" height="450" style="border: 2px solid black; width: 500px;height: 400px;"></canvas>
<input type='file' id="fileUpload" onChange="readURL(this);" accept="image/*" style="margin-top: 30px; margin-left: 80px;" >
</div>
</div>
另外,我有这个小提琴:
jsfiddle.net/mahbub_rahman/m04c3smj/5
感谢您的帮助。
您想要这样的?
检查此小提琴链接。
<canvas id="canvas" width="400" height="233" style="border:1px solid red"></canvas>
#canvas {
background-color: white;
}
<script>
var lineOffset = 4;
var anchrSize = 2;
var mousedown = false;
var clickedArea = {box: -1, pos:'o'};
var x1 = -1;
var y1 = -1;
var x2 = -1;
var y2 = -1;
var boxes = [];
var tmpBox = null;
document.getElementById("panel").onmousedown = function(e) {
mousedown = true;
clickedArea = findCurrentArea(e.offsetX, e.offsetY);
x1 = e.offsetX;
y1 = e.offsetY;
x2 = e.offsetX;
y2 = e.offsetY;
};
document.getElementById("panel").onmouseup = function(e) {
if (clickedArea.box == -1 && tmpBox != null) {
boxes.push(tmpBox);
} else if (clickedArea.box != -1) {
var selectedBox = boxes[clickedArea.box];
if (selectedBox.x1 > selectedBox.x2) {
var previousX1 = selectedBox.x1;
selectedBox.x1 = selectedBox.x2;
selectedBox.x2 = previousX1;
}
if (selectedBox.y1 > selectedBox.y2) {
var previousY1 = selectedBox.y1;
selectedBox.y1 = selectedBox.y2;
selectedBox.y2 = previousY1;
}
}
clickedArea = {box: -1, pos:'o'};
tmpBox = null;
mousedown = false;
console.log(boxes);
};
document.getElementById("panel").onmouseout = function(e) {
if (clickedArea.box != -1) {
var selectedBox = boxes[clickedArea.box];
if (selectedBox.x1 > selectedBox.x2) {
var previousX1 = selectedBox.x1;
selectedBox.x1 = selectedBox.x2;
selectedBox.x2 > previousX1;
}
if (selectedBox.y1 > selectedBox.y2) {
var previousY1 = selectedBox.y1;
selectedBox.y1 = selectedBox.y2;
selectedBox.y2 > previousY1;
}
}
mousedown = false;
clickedArea = {box: -1, pos:'o'};
tmpBox = null;
};
document.getElementById("panel").onmousemove = function(e) {
if (mousedown && clickedArea.box == -1) {
x2 = e.offsetX;
y2 = e.offsetY;
redraw();
} else if (mousedown && clickedArea.box != -1) {
x2 = e.offsetX;
y2 = e.offsetY;
xOffset = x2 - x1;
yOffset = y2 - y1;
x1 = x2;
y1 = y2;
if (clickedArea.pos == 'i' ||
clickedArea.pos == 'tl' ||
clickedArea.pos == 'l' ||
clickedArea.pos == 'bl') {
boxes[clickedArea.box].x1 += xOffset;
}
if (clickedArea.pos == 'i' ||
clickedArea.pos == 'tl' ||
clickedArea.pos == 't' ||
clickedArea.pos == 'tr') {
boxes[clickedArea.box].y1 += yOffset;
}
if (clickedArea.pos == 'i' ||
clickedArea.pos == 'tr' ||
clickedArea.pos == 'r' ||
clickedArea.pos == 'br') {
boxes[clickedArea.box].x2 += xOffset;
}
if (clickedArea.pos == 'i' ||
clickedArea.pos == 'bl' ||
clickedArea.pos == 'b' ||
clickedArea.pos == 'br') {
boxes[clickedArea.box].y2 += yOffset;
}
redraw();
}
}
function redraw() {
// canvas.width = canvas.width;
var context = document.getElementById("panel").getContext('2d');
context.globalCompositeOperation='destination-over';
context.clearRect(0, 0, 800, 600);
context.beginPath();
for (var i = 0; i < boxes.length; i++) {
drawBoxOn(boxes[i], context);
}
if (clickedArea.box == -1) {
tmpBox = newBox(x1, y1, x2, y2);
if (tmpBox != null) {
drawBoxOn(tmpBox, context);
}
}
}
function findCurrentArea(x, y) {
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
xCenter = box.x1 + (box.x2 - box.x1) / 2;
yCenter = box.y1 + (box.y2 - box.y1) / 2;
if (box.x1 - lineOffset < x && x < box.x1 + lineOffset) {
if (box.y1 - lineOffset < y && y < box.y1 + lineOffset) {
return {box: i, pos:'tl'};
} else if (box.y2 - lineOffset < y && y < box.y2 + lineOffset) {
return {box: i, pos:'bl'};
} else if (yCenter - lineOffset < y && y < yCenter + lineOffset) {
return {box: i, pos:'l'};
}
} else if (box.x2 - lineOffset < x && x < box.x2 + lineOffset) {
if (box.y1 - lineOffset < y && y < box.y1 + lineOffset) {
return {box: i, pos:'tr'};
} else if (box.y2 - lineOffset < y && y < box.y2 + lineOffset) {
return {box: i, pos:'br'};
} else if (yCenter - lineOffset < y && y < yCenter + lineOffset) {
return {box: i, pos:'r'};
}
} else if (xCenter - lineOffset < x && x < xCenter + lineOffset) {
if (box.y1 - lineOffset < y && y < box.y1 + lineOffset) {
return {box: i, pos:'t'};
} else if (box.y2 - lineOffset < y && y < box.y2 + lineOffset) {
return {box: i, pos:'b'};
} else if (box.y1 - lineOffset < y && y < box.y2 + lineOffset) {
return {box: i, pos:'i'};
}
} else if (box.x1 - lineOffset < x && x < box.x2 + lineOffset) {
if (box.y1 - lineOffset < y && y < box.y2 + lineOffset) {
return {box: i, pos:'i'};
}
}
}
return {box: -1, pos:'o'};
}
function newBox(x1, y1, x2, y2) {
boxX1 = x1 < x2 ? x1 : x2;
boxY1 = y1 < y2 ? y1 : y2;
boxX2 = x1 > x2 ? x1 : x2;
boxY2 = y1 > y2 ? y1 : y2;
if (boxX2 - boxX1 > lineOffset * 2 && boxY2 - boxY1 > lineOffset * 2) {
return {x1: boxX1,
y1: boxY1,
x2: boxX2,
y2: boxY2,
lineWidth: 2,
color: 'red'};
} else {
return null;
}
}
function drawBoxOn(box, context) {
xCenter = box.x1 + (box.x2 - box.x1) / 2;
yCenter = box.y1 + (box.y2 - box.y1) / 2;
context.strokeStyle = box.color;
context.fillStyle = box.color;
context.rect(box.x1, box.y1, (box.x2 - box.x1), (box.y2 - box.y1));
context.lineWidth = box.lineWidth;
context.stroke();
context.fillRect(box.x1 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(box.x1 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(box.x1 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(xCenter - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(xCenter - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(xCenter - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(box.x2 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(box.x2 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
context.fillRect(box.x2 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
}
function el(id){return document.getElementById(id);} // Get elem by ID
var canvas = el("panel");
var context = canvas.getContext("2d");
var cx=100;
function readImage() {
if ( this.files && this.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
var img = new Image();
img.addEventListener("load", function() {
context.drawImage(img, 0, 0, 400, 233);
});
img.src = e.target.result;
};
FR.readAsDataURL( this.files[0] );
}
}
el("fileUpload").addEventListener("change", readImage, false);
<script>