Question

我在画布上逐个上传多个图片。但问题是，图像不可拖动。我看到一个拖动选项链接，但我不知道如何使用这个。 https://jqueryui.com/draggable/

我将向您展示一个屏幕截图：

我想在画布上用鼠标拖动每个图像。代码：

<html>
<head>
  <meta charset="utf-8">
  <title>Canvas Background through CSS</title>
  <style type="text/css" media="screen">
    canvas, img { display:block; margin:1em auto; border:1px solid black; }

  </style>
</head>
<body>
<input type='file' id="fileUpload" />
<canvas id="canvas"  width="900" height="600" style="background-color:#ffffff;"></canvas>  


</body>
<script>

console.log("step 1");
function el(id){return document.getElementById(id);} // Get elem by ID
console.log("step 2");
var canvas  = el("canvas");
console.log("step 3");
var context = canvas.getContext("2d");
console.log("step 4");
function readImage() {
    console.log("step 5");
    if ( this.files && this.files[0] ) {
        console.log("step 6");
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.onload = function() {
             context.drawImage(img, 0, 0);
           };
   var b = img.src = e.target.result;
 console.log("step 7");
        };       
        FR.readAsDataURL( this.files[0] );
    }
}
console.log("step 8");
el("fileUpload").addEventListener("change", readImage, false);
</script>
</html>

我看到了另一个链接，但我无法理解。 http://jsfiddle.net/m1erickson/qm9Eb/

因为在这个示例框中已经在画布中直到现在我还不知道这个问题。但是我做的事情，我会告诉你代码：

<style>
            body{ background-color: ivory; padding:10px;}
            #canvas{border:1px solid red;}
        </style>
        <p>Resize the image using the 4 draggable corner anchors</p>
        <p>You can also drag the image</p>
        <input type="file" id="input"/>
        <canvas id="canvas" width=750 height=550></canvas>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>


        <script>


            $(function () {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                console.log("ctx  " + ctx);
                var canvasOffset = $("#canvas").offset();
                var offsetX = canvasOffset.left;
                var offsetY = canvasOffset.top;

                var startX;
                var startY;
                var isDown = false;


                var pi2 = Math.PI * 2;
                var resizerRadius = 8;
                var rr = resizerRadius * resizerRadius;
                var draggingResizer = {x: 0, y: 0};
                var imageX = 50;
                var imageY = 50;
                var imageWidth, imageHeight, imageRight, imageBottom;
                var draggingImage = false;
                var startX;
                var startY;

                var img = new Image();
                img.onload = function () {
                    imageWidth = img.width;
                    imageHeight = img.height;
                    imageRight = imageX + imageWidth;
                    imageBottom = imageY + imageHeight
                    draw(true, false);
                }

                var input = document.getElementById('input');
                input.addEventListener('change', handleFiles);

                function handleFiles(e) {
                    var ctx = document.getElementById('canvas').getContext('2d');
                    var img = new Image;
                    img.src = URL.createObjectURL(e.target.files[0]);
                    console.log("img.src  " + img.src);

                    img.onload = function () {
                        ctx.drawImage(img, 20, 20);
                    }
                }

                img.src = "https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg";
                function draw(withAnchors, withBorders) {
                    // clear the canvas
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    // draw the image
                    ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);
                    // optionally draw the draggable anchors
                    if (withAnchors) {
                        drawDragAnchor(imageX, imageY);
                        drawDragAnchor(imageRight, imageY);
                        drawDragAnchor(imageRight, imageBottom);
                        drawDragAnchor(imageX, imageBottom);
                    }
                    // optionally draw the connecting anchor lines
                    if (withBorders) {
                        ctx.beginPath();
                        ctx.moveTo(imageX, imageY);
                        ctx.lineTo(imageRight, imageY);
                        ctx.lineTo(imageRight, imageBottom);
                        ctx.lineTo(imageX, imageBottom);
                        ctx.closePath();
                        ctx.stroke();
                    }
                }

                function drawDragAnchor(x, y) {
                    ctx.beginPath();
                    ctx.arc(x, y, resizerRadius, 0, pi2, false);
                    ctx.closePath();
                    ctx.fill();
                }

                function anchorHitTest(x, y) {
                    var dx, dy;
                    // top-left
                    dx = x - imageX;
                    dy = y - imageY;
                    if (dx * dx + dy * dy <= rr) {
                        return(0);
                    }
                    // top-right
                    dx = x - imageRight;
                    dy = y - imageY;
                    if (dx * dx + dy * dy <= rr) {
                        return(1);
                    }
                    // bottom-right
                    dx = x - imageRight;
                    dy = y - imageBottom;
                    if (dx * dx + dy * dy <= rr) {
                        return(2);
                    }
                    // bottom-left
                    dx = x - imageX;
                    dy = y - imageBottom;
                    if (dx * dx + dy * dy <= rr) {
                        return(3);
                    }
                    return(-1);

                }


                function hitImage(x, y) {
                    return(x > imageX && x < imageX + imageWidth && y > imageY && y < imageY + imageHeight);
                }


                function handleMouseDown(e) {
                    startX = parseInt(e.clientX - offsetX);
                    startY = parseInt(e.clientY - offsetY);
                    draggingResizer = anchorHitTest(startX, startY);
                    draggingImage = draggingResizer < 0 && hitImage(startX, startY);
                }

                function handleMouseUp(e) {
                    draggingResizer = -1;
                    draggingImage = false;
                    draw(true, false);
                }

                function handleMouseOut(e) {
                    handleMouseUp(e);
                }

                function handleMouseMove(e) {

                    if (draggingResizer > -1) {

                        mouseX = parseInt(e.clientX - offsetX);
                        mouseY = parseInt(e.clientY - offsetY);

                        // resize the image
                        switch (draggingResizer) {
                            case 0: //top-left
                                imageX = mouseX;
                                imageWidth = imageRight - mouseX;
                                imageY = mouseY;
                                imageHeight = imageBottom - mouseY;
                                break;
                            case 1: //top-right
                                imageY = mouseY;
                                imageWidth = mouseX - imageX;
                                imageHeight = imageBottom - mouseY;
                                break;
                            case 2: //bottom-right
                                imageWidth = mouseX - imageX;
                                imageHeight = mouseY - imageY;
                                break;
                            case 3: //bottom-left
                                imageX = mouseX;
                                imageWidth = imageRight - mouseX;
                                imageHeight = mouseY - imageY;
                                break;
                        }

                        // enforce minimum dimensions of 25x25
                        if (imageWidth < 25) {
                            imageWidth = 25;
                        }
                        if (imageHeight < 25) {
                            imageHeight = 25;
                        }

                        // set the image right and bottom
                        imageRight = imageX + imageWidth;
                        imageBottom = imageY + imageHeight;

                        // redraw the image with resizing anchors
                        draw(true, true);

                    } else if (draggingImage) {

                        imageClick = false;

                        mouseX = parseInt(e.clientX - offsetX);
                        mouseY = parseInt(e.clientY - offsetY);

                        // move the image by the amount of the latest drag
                        var dx = mouseX - startX;
                        var dy = mouseY - startY;
                        imageX += dx;
                        imageY += dy;
                        imageRight += dx;
                        imageBottom += dy;
                        // reset the startXY for next time
                        startX = mouseX;
                        startY = mouseY;

                        // redraw the image with border
                        draw(false, true);
                    }
                }


                $("#canvas").mousedown(function (e) {
                    handleMouseDown(e);
                });
                $("#canvas").mousemove(function (e) {
                    handleMouseMove(e);
                });
                $("#canvas").mouseup(function (e) {
                    handleMouseUp(e);
                });
                $("#canvas").mouseout(function (e) {
                    handleMouseOut(e);
                });


            }); // end $(function(){});
        </script>

男孩形象是固定的，汽车图像是可拖动的，因为我直接在html画布中获取而不是由用户上传。（img.src =“https://d3s16h6oq3j5fb.cloudfront.net/1.10.7/img/cake-cat-represntative-img/shapecakes.jpg”;）。
第一个男孩图像是通过使用上传。这不可拖延。

请介绍一下这个问题。

多个图像在画布html5中拖动和旋转

0 个答案: