0

我有一个画布并在其上加载图像。我想让这个图像可拖动。到目前为止，我的代码是：

$(document).ready(function() {
    loadImagetoEdit();
});

function loadImagetoEdit() {

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

   imageObj = new Image();      
   imageObj.onload  = function(){
       ctx.drawImage(this, 0, 0, 100, 100);        
   };
   imageObj.src = 'myImage.png';

 }

我找到了这个教程http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 还有这个http://www.html5canvastutorials.com/labs/html5- canvas-drag-and-drop-an-image-tutorial/但我无法在我的案例中成功应用它们。你有人为我提供最简单的解决方案吗？

谢谢是提前

4

1 回答 1

0

使用重新缩放、鼠标事件处理程序和偏移量。例如：

var canvas;
var ctx;
var status;

var isMouseDown = false;

// Canvas Dimensions
var cw = 0;
var ch = 0;

// Puck Dimensions (and Half thereof)
var pw = 30;
var ph = 30;
var pw2 = 0;
var ph2 = 0;

// Puck Position
var px = 50;
var py = 100;

// cursor offset relative to the puck
var cx = 0;
var cy = 0;

// Attr:Actual dimensions Scale
var sx = 1.0;
var sy = 1.0;


function Init()
{
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    status = document.getElementById("status");

    cw = canvas.width;
    ch = canvas.height;

    // get the scale based on actual width;
    sx = cw / canvas.offsetWidth;
    sy = ch / canvas.offsetHeight;

    // Rescale the puck
    pw = pw * sx;
    ph = ph * sy;
    pw2 = pw/2;
    ph2 = ph/2;

    // Rescale the puck position
    px = px * sx;
    py = py * sy;

    status.innerHTML = "Attr:" + canvas.width + "," + canvas.height
                     + "; Actual:" + canvas.offsetWidth + "," + canvas.offsetHeight
                     + "; Scale:" + sx + "," + sy
                     + "; Puck:" + pw + "," + ph;

    canvas.onmouseup = MouseUp;
    canvas.onmousedown = MouseDown;
    canvas.onmousemove = MouseMoved;

    return setInterval(Repaint, 10); // repaint the canvas at intervals
}


function Repaint()
{
    // Clear the canvas
    ctx.clearRect(0, 0, cw, ch);

    // Draw the background
    DrawRect(0, 0, cw, ch, "rgb(220,220,190)");

    // Draw the puck
    DrawRect(px, py, pw, ph, "blue");
}

function DrawRect(x, y, w, h, colour)
{    
    ctx.fillStyle = colour;
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.closePath();
    ctx.fill();
}

function MouseMoved(e)
{
    status.innerHTML = "Cursor[" + e.pageX + ", " + e.pageY + "], Offset["
        + (e.pageX - canvas.offsetLeft) + ", " + (e.pageY - canvas.offsetTop) + "]";
    
    if ( IsCursorOverPuck(e.pageX, e.pageY) )
    {
        document.body.style.cursor = 'pointer';
    }
    else
    {
        document.body.style.cursor = 'default';
    }

    if (isMouseDown)
    {
        px = (e.pageX - canvas.offsetLeft)*sx - cx*sx;
        py = (e.pageY - canvas.offsetTop)*sy - cy*sy;

        status.innerHTML = "mouse down. Offset[" + cx + ", " + cy + "], Puck[" + px + ", " + py + "]";
    }

}


function MouseUp()
{
    isMouseDown = false;
}
function MouseDown(e)
{
    if ( IsCursorOverPuck(e.pageX, e.pageY) )
    {
        cx = (e.pageX - canvas.offsetLeft)*sx - px;
        cy = (e.pageY - canvas.offsetTop)*sy - py;
        isMouseDown = true;
    }
}


function IsCursorOverPuck(x, y)
{
    status.innerHTML = "Cursor[" + x + ", " + y + "], CanvasOffset["
        + (x - canvas.offsetLeft) + ", " + (y - canvas.offsetTop) + "], Puck["
        + px + ", " + py + "]";

    return (x - canvas.offsetLeft) * sx > px  &&  (x - canvas.offsetLeft) * sx < px + pw
        && (y - canvas.offsetTop) * sy > py   &&  (y - canvas.offsetTop) * sy < py + ph;
}

    
Init();
<canvas id="canvas" width="400" height="300"></canvas>
<div id="status"></div>

参考

于 2017-09-28T06:55:38.757 回答