在画布中,我绘制了一个矩形并完成拖动和调整功能。绘制圆圈以表示调整矩形大小的手柄。但现在我想使用光标类型拖动。
我使用了光标类型如下:
$("#canvas").css({'cursor':'ne-resize'});
这里是jsfiddle链接。 http://jsfiddle.net/BaliBalo/9HXMG/
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
rect = {
x: 150,
y: 100,
w: 123,
h: 58
},
handlesSize = 8,
currentHandle = false,
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function point(x, y) {
return {
x: x,
y: y
};
}
function dist(p1, p2) {
return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
}
function getHandle(mouse) {
if (dist(mouse, point(rect.x, rect.y)) <= handlesSize) return 'topleft';
if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize) return 'topright';
if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize) return 'bottomleft';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize) return 'bottomright';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize) return 'top';
if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize) return 'left';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize) return 'bottom';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize) return 'right';
return false;
}
function mouseDown(e) {
if (currentHandle) drag = true;
draw();
}
function mouseUp() {
drag = false;
currentHandle = false;
draw();
}
function mouseMove(e) {
var previousHandle = currentHandle;
if (!drag) currentHandle = getHandle(point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop));
if (currentHandle && drag) {
var mousePos = point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
switch (currentHandle) {
case 'topleft':
rect.w += rect.x - mousePos.x;
rect.h += rect.y - mousePos.y;
rect.x = mousePos.x;
rect.y = mousePos.y;
break;
case 'topright':
rect.w = mousePos.x - rect.x;
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'bottomleft':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
rect.h = mousePos.y - rect.y;
break;
case 'bottomright':
rect.w = mousePos.x - rect.x;
rect.h = mousePos.y - rect.y;
break;
case 'top':
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'left':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
break;
case 'bottom':
rect.h = mousePos.y - rect.y;
break;
case 'right':
rect.w = mousePos.x - rect.x;
break;
}
}
if (drag || currentHandle != previousHandle) draw();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
if (currentHandle) {
var posHandle = point(0, 0);
switch (currentHandle) {
case 'topleft':
posHandle.x = rect.x;
posHandle.y = rect.y;
break;
case 'topright':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y;
break;
case 'bottomleft':
posHandle.x = rect.x;
posHandle.y = rect.y + rect.h;
break;
case 'bottomright':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y + rect.h;
break;
case 'top':
posHandle.x = rect.x + rect.w / 2;
posHandle.y = rect.y;
break;
case 'left':
posHandle.x = rect.x;
posHandle.y = rect.y + rect.h / 2;
break;
case 'bottom':
posHandle.x = rect.x + rect.w / 2;
posHandle.y = rect.y + rect.h;
break;
case 'right':
posHandle.x = rect.x + rect.w;
posHandle.y = rect.y + rect.h / 2;
break;
}
ctx.globalCompositeOperation = 'xor';
ctx.beginPath();
ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
}
}
init();
draw();
&#13;
<canvas id="canvas" width="500" height="500"></canvas>
&#13;
答案 0 :(得分:5)
在draw
函数的swicth语句中添加所需的游标类型:
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
rect = {
x: 150,
y: 100,
w: 123,
h: 58
},
handlesSize = 8,
currentHandle = false,
drag = false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function point(x, y) {
return {
x: x,
y: y
};
}
function dist(p1, p2) {
return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
}
function getHandle(mouse) {
if (dist(mouse, point(rect.x, rect.y)) <= handlesSize) return 'topleft';
if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize) return 'topright';
if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize) return 'bottomleft';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize) return 'bottomright';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize) return 'top';
if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize) return 'left';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize) return 'bottom';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize) return 'right';
return false;
}
function mouseDown(e) {
if (currentHandle) drag = true;
draw();
}
function mouseUp() {
drag = false;
currentHandle = false;
draw();
}
function mouseMove(e) {
var previousHandle = currentHandle;
if (!drag) currentHandle = getHandle(point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop));
if (currentHandle && drag) {
var mousePos = point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
switch (currentHandle) {
case 'topleft':
rect.w += rect.x - mousePos.x;
rect.h += rect.y - mousePos.y;
rect.x = mousePos.x;
rect.y = mousePos.y;
break;
case 'topright':
rect.w = mousePos.x - rect.x;
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'bottomleft':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
rect.h = mousePos.y - rect.y;
break;
case 'bottomright':
rect.w = mousePos.x - rect.x;
rect.h = mousePos.y - rect.y;
break;
case 'top':
rect.h += rect.y - mousePos.y;
rect.y = mousePos.y;
break;
case 'left':
rect.w += rect.x - mousePos.x;
rect.x = mousePos.x;
break;
case 'bottom':
rect.h = mousePos.y - rect.y;
break;
case 'right':
rect.w = mousePos.x - rect.x;
break;
}
}
if (drag || currentHandle != previousHandle) draw();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
if (currentHandle) {
var posHandle = point(0, 0);
var dir;
switch (currentHandle) {
case 'topleft':
dir={x:rect.w>0?'w':'e',y:rect.h>0?'n':'s'};
canvas.style.cursor= dir.y+dir.x+'-resize';
break;
case 'topright':
dir={x:rect.w>0?'e':'w',y:rect.h>0?'n':'s'};
canvas.style.cursor= dir.y+dir.x+'-resize';
break;
case 'bottomleft':
dir={x:rect.w>0?'w':'e',y:rect.h>0?'s':'n'};
canvas.style.cursor= dir.y+dir.x+'-resize';
break;
case 'bottomright':
dir={x:rect.w>0?'e':'w',y:rect.h>0?'s':'n'};
canvas.style.cursor= dir.y+dir.x+'-resize';
break;
case 'top':
canvas.style.cursor= (rect.h>0?'n':'s')+'-resize';
break;
case 'left':
canvas.style.cursor= (rect.w>0?'w':'e')+'-resize';
break;
case 'bottom':
canvas.style.cursor= (rect.h>0?'s':'n')+'-resize';
break;
case 'right':
canvas.style.cursor= (rect.w>0?'e':'w')+'-resize';
break;
}
}else canvas.style.cursor='';
}
init();
draw();
<canvas id="canvas" width="500" height="500"></canvas>
答案 1 :(得分:0)
如果您只是想更改光标类型,请将其放在html中的样式标记或链接到html的css文件中
#canvas{ cursor: ne-resize}
或使用javascript执行此操作
document.getElementById("canvas").style.cursor = "ne-resize";
您拥有的代码$("#canvas").css({'cursor':'ne-resize'});
是jQuery。为了使其正常工作,您需要在头标记中链接库。