Question

我想在画布中拖放图像但是如果我想移动图像，我必须在A和B之间单击左上角的图像。但我想点击像C和D中的图像中心来拖动它。

我的图片已裁剪掉所有边缘。这是我的画布代码：

// Canvas
canvas =  document.getElementById("canvas");
ctx = canvas.getContext("2d");

// Variable for dragging and a variable to save my clicked image temporarely
var dragging = false;
var selectedItem = null;

// My fruit images saved in a self-declared object. For the object class look further down.
var fruits= [];
    fruits.push(new ImageObject(0, '../images/apple_canvas.png', 30, 30));           //Apple
    fruits.push(new ImageObject(1, '../images/banana_canvas.png', 160, 35));         //Banana
    fruits.push(new ImageObject(2, '../images/orange_canvas.png', 290, 25));         //Orange
    fruits.push(new ImageObject(3, '../images/melone_canvas.png', 410, 45));         //Melone
    fruits.push(new ImageObject(4, '../images/nuts_canvas.png', 570, 30));         //Nuts
    fruits.push(new ImageObject(5, '../images/grapes_canvas.png', 22, 170));        //Grapes
    fruits.push(new ImageObject(6, '../images/strawberry_canvas.png', 170, 170));      //Strawberry
    fruits.push(new ImageObject(7, '../images/kiwi_canvas.png', 300, 180));            //Kiwi
    fruits.push(new ImageObject(8, '../images/huckleberry_canvas.png', 580, 170));  //Huckleberry

// My function to draw my fruit images in my canvas
draw(); 

// adding mouse event listener
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);  
canvas.addEventListener('mouseup', onMouseUp);  

// functions of my mouse click events
function onMouseDown(e)
{
    console.log('Mouse X: ' + e.layerX + ', Mouse Y: ' + e.layerY);

    for (var i = 0; i < fruits.length; i++)
    {
        if (fruits[i].inside(e.layerX, e.layerY) && fruits[i].clickable)
        {
            console.log('Hit!');
            dragging = true;
            selectedItem = fruits[i];
            selectedItem.setPosition(e.layerX, e.layerY);
        }
    }
}   

function onMouseMove(e)
{
    if (dragging)
    {
        selectedItem.setPosition(e.layerX, e.layerY);
        draw();
    }
}

function onMouseUp(e)
{
    if (dragging)
    {
        selectedItem.setPosition(e.layerX, e.layerY);
        draw();
        dragging = false;
        selectedItem = null;
    }
}

//My function to color the complete canvas

function clearBackground()
{
    ctx.fillStyle = "#a8d5dc";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

// All fruit images will be drawn
function draw()
{
    clearBackground();

    for (var i = 0; i < fruits.length; i++)
    {
        ctx.drawImage(fruits[i].image, fruits[i].x, fruits[i].y);
    }
}

我自我声明的ImageObject的代码是：

var ImageObject = function(id, source, x, y){
    this.image= new Image();
    this.image.src = source; //image source
    this.id = id;
    this.x = x;
    this.y = y;
    this.r = 20;           //The radius of my image should be 20 pixels
    this.last_x = x;
    this.last_y = y;
    this.clickable = true; //Is my image clickable
};

ImageObject.prototype.setPosition = function(x, y)
{
    this.x = x;
    this.y = y;
};

// Inside test for my fruit images

ImageObject.prototype.inside = function(mouse_x, mouse_y)
{
    if (Math.sqrt(Math.pow((mouse_x - this.x), 2) +
        Math.pow((mouse_y - this.y), 2)) < this.r)
        {
            return true;
        }
        else
        {
            return false;
        }
};

如何将拖动放在图像中心？

HTML 5 - 画布：我无法拖动图像的中心进行移动

0 个答案: