HTML5画布 - 在鼠标点击时添加图像,在鼠标坐标
好吧,我一直试图让这个好几个小时,我找不到任何东西。HTML5画布 - 在鼠标点击时添加图像,在鼠标坐标
有人可以输入快速脚本,或点我在这个教程的方向..
我想有一个图像(imgObj)拿出在画布上,当用户点击画布上。我想让图像出现在用户点击鼠标时的坐标上。
任何想法?
非常感谢!
你可以从这里开始:http://www.html5canvastutorials.com/
这是HTML5的Canvas的教程。
KineticJS是一个库,使这很容易:http://www.kineticjs.com/
基本上与KineticJS你可以用下面的方法来实现自己的目标:
container.on("mousedown", function(){
image.show();
});
container.on("dragmove", function(){
var mousePos = container.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
image.move(x, y)
});
container.on("dragend"), function(){
image.hide();
});
为响应晚真是不好意思。我知道这个问题比上帝更古老,但还没有一个可以接受的答案,所以我想我会为那些不想使用外部图书馆的人投入我的两分钱。
我为你写了一个简约的脚本,它会做你想做的 - 只需要相应地将fillRect()
改为drawImage()
即可。
var cn = document.getElementById("main");
var c = cn.getContext("2d");
var mouse = {x:0, y:0};
window.addEventListener('mousedown', mHandler);
function mHandler(event) {
mouse.x = event.clientX;
mouse.y = event.clientY;
};
function main() {
c.clearRect(0, 0, cn.width, cn.height);
c.fillStyle = "red";
c.fillRect(mouse.x, mouse.y, 50, 50);
}
setInterval(main, 1000/60);
这里是工作示例的的jsfiddle:http://jsfiddle.net/96s20d7m/
我设置x
和y
值,你点击在画布上,然后绘制了某些那里fillRect()
。
请注意,这并不总是按预期工作,因为pageX
和pageY
根据边框,填充,边距等而变化。您可以在小提琴中看到此内容。要做到这一点,只需将pageX/Y
更改为offsetX/Y
,或使用填充。
像这样的事情在mHandler
功能将工作好一点:
if(event.offsetX && event.offsetY) {
mouse.x = event.offsetX;
mouse.y = event.offsetY;
}
else {
mouse.x = event.layerX;
mouse.y = event.layerY;
}
或者,如果你想缩短它:
mouse.x = event.offsetX ? event.offsetX : event.layerX;
mouse.y = event.offsetY ? event.offsetY : event.layerY;
然后你可以叫
context.drawImage(imgObj, mouse.x, mouse.y, imgObj.width, imgObj.height);
如果你想在鼠标点击的中心,只需拨打
context.drawImage(
imgObj,
mouse.x - imgObj.width/2,
mouse.y - imgObj.height/2,
imgObj.width, imgObj.height
);
像这样:http://jsfiddle.net/96s20d7m/4/
再次,替代矩形为你的形象。
我希望这有助于任何人阅读今年以后!