拖动鼠标时将光标移到HTML5画布上
问题描述:
我使用画布标记制作了一个画笔类型的应用程序。我想,当鼠标在画布光标变为上,拖动鼠标时将光标移到HTML5画布上
<canvas id="draw" style="cursor: url(image/pencil.cur)">
我已经做到了这一点,但我无法弄清楚如何将我改变光标,而我拖动鼠标绘制图像
答
使用:active
CSS伪类改变光标当鼠标按键时在元素:
#draw:active {
cursor: url(image/pencil.cur);
}
答
两个办法我能想到这一点,其中一个可能完成你想要的:
-
使用JavaScript来改变光标,沿着相同的路线,因为这jQuery的片段:
$('canvas#draw').css('cursor', 'url(image/another-cursor.cur)');
如果您要在事件中使用鼠标按钮时按下鼠标按钮,并在释放时恢复原始图案,我想这样会达到您想要的效果。
在画布本身上绘制“光标”,并让它跟踪画布上的鼠标位置。通过这种方式,您可以绘制一个Photoshop风格的圆圈(等)来指示绘图将在何处发生。我不确定这种方法的性能如何(我没有尝试过),但我想它应该没问题。只需使用鼠标移动时为画布触发的事件,这大概就是你已经用来追踪涂料应该放在哪里的东西。
答
将“拖动”类添加到画布上,而拖动动作是在(移除它mouseUp事件)
然后加入这种风格:
canvas {cursor: default;}
canvas.dragging {cursor: crosshair;}
答
对于任何一个还在寻找一个解决这个WebKit的错误:https://bugs.webkit.org/show_bug.cgi?id=105355,这是我做的。
我将此属性添加到body元素以使所有文本在我的页面中不可选,就是这样。
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
问题是,如果你真的需要一个元素是可选的,你将不得不改变它的CSS来做到这一点。
请注意,您应该[避免将您的CSS放入HTML中](http://phrogz.net/CSS/HowToDevelopWithCSS.html#separatestyle)。 – Phrogz 2011-02-09 15:04:01
http://jsfiddle.net/Mutant_Tractor/DMBWC/1/这个例子表明,如果你在页面上有可选的文本,它将不起作用。当我在上面的示例中拖过画布时,它仍然变成文本选择游标。 – 2011-12-12 19:08:32