2012-02-21 201 views
2

好吧,我一直试图让这个好几个小时,我找不到任何东西。HTML5画布 - 在鼠标点击时添加图像,在鼠标坐标

有人可以输入快速脚本,或点我在这个教程的方向..

我想有一个图像(imgObj)拿出在画布上,当用户点击画布上。我想让图像出现在用户点击鼠标时的坐标上。

任何想法?

非常感谢!

回答

2

你可以从这里开始: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(); 
}); 
0

为响应晚真是不好意思。我知道这个问题比上帝更古老,但还没有一个可以接受的答案,所以我想我会为那些不想使用外部图书馆的人投入我的两分钱。

我为你写了一个简约的脚本,它会做你想做的 - 只需要相应地将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/

我设置xy值,你点击在画布上,然后绘制了某些那里fillRect()

请注意,这并不总是按预期工作,因为pageXpageY根据边框,填充,边距等而变化。您可以在小提琴中看到此内容。要做到这一点,只需将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/

再次,替代矩形为你的形象。

我希望这有助于任何人阅读今年以后!