HTML5 Canvas - Добавить изображение по клику мыши, по координатам мыши

Question

Хорошо, ребята, я пытаюсь получить это часами, я ничего не могу найти.

Может кто-нибудь напечатать быстрый сценарий или указать мне руководство по этому вопросу ...

Я хочу, чтобы изображение (imgObj) появлялось на холсте, когда пользователь нажимает на холст.Я хочу, чтобы изображение отображалось с координатами, указанными мышью, когда пользователь щелкает.

Есть идеи?

Большое спасибо!

Answer 1

Вы можете начать здесь: http://www.html5canvastutorials.com/

Это учебник по холсту HTML5.

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();
});

Answer 2

Очень жаль за поздний ответ. Я знаю, что этот вопрос старше, чем Бог, но пока что нет общепринятого ответа, поэтому я решил поставить свои два цента для людей, которые не хотят использовать внешние библиотеки.

Я написал для вас минималистичный скрипт, который будет делать то, что вы хотите - просто измените 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/

Снова замените прямоугольник для вашего изображения.

Надеюсь, это помогло любому, читающему это спустя годы!