[英]How to move a html5 canvas element(rectangle) by touching it by onTouch method
[英]Create multiple dragable rectangle in canvas element html5
$(document).ready(function () {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseUp() {
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY;
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
}
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();
});
到目前為止,這就是我所擁有的,但是當我創建另一個矩形時,最后一個將被自動擦除。 我需要創建多個矩形,並使它們能夠在畫布內拖動。
使用drawOldShapes()方法,可以保留舊矩形。
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
// ctx.globalAlpha = 0.5;
rect = {},
drag = false;
var rectStartXArray = new Array() ;
var rectStartYArray = new Array() ;
var rectWArray = new Array() ;
var rectHArray = new Array() ;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseUp() {
rectStartXArray[rectStartXArray.length] = rect.startX;
rectStartYArray[rectStartYArray.length] = rect.startY;
rectWArray[rectWArray.length] = rect.w;
rectHArray[rectHArray.length] = rect.h;
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY;
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
}
drawOldShapes();
}
function draw() {
ctx.beginPath();
ctx.rect(rect.startX, rect.startY, rect.w, rect.h);
ctx.stroke();
}
function drawOldShapes(){
for(var i=0;i<rectStartXArray.length;i++)
{
if(rectStartXArray[i]!= rect.startX && rectStartYArray[i] != rect.startY && rectWArray[i] != rect.w && rectHArray[i] != rect.h)
{
ctx.beginPath();
ctx.rect(rectStartXArray[i], rectStartYArray[i], rectWArray[i], rectHArray[i]);
ctx.stroke();
}
}
}
init();
我想您需要將每個矩形存儲在數組中,並且每次調用draw()
都需要繪制所有矩形。
就像是:
rects = [];
rect = null;
//onmouse down:
rect = { x1 : <value from Mouse>,y1: <value from Mouse>,x2 : 0 ,y2 : 0 };
//onmouse up
rect.x2 = <value from Mouse>;
rect.y2 = <value from Mouse>;
rects.push( rect );
rect = null;
//draw
for( var i = 0; i < rects.length; i++ ) {
//drawing each rectangle
}
這只是一種建議。 在坐標旁邊,您還可以存儲有關填充顏色,筆划寬度和-style等的信息。
祝好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.