Das HTML5 Canvas-Element per Drag-and-Drop-Element

Kämpfen um diese Arbeit zu arbeiten. Hier ist mein code:

<canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=600 width=1000 style="border:1px solid #000000;"></canvas>
                        <img id="img1" src="./images/arrow_up.svg" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/>
                    <script type="text/javascript">
                        function init() {
                            var canvas = document.getElementById("graphCanvas");
                            var context = canvas.getContext("2d");

                            context.lineWidth = 2;
                            }
                            var pos;
                            function allowDrop(ev) {
                                ev.preventDefault();
                            }
                            function get_pos(ev){
                                pos = [ev.pageX, ev.pageY];
                            }
                            function drag(ev) {
                                ev.dataTransfer.setData("Text",ev.target.id);
                            }

                            function drop(ev) {
                                ev.preventDefault();
                                var offset = ev.dataTransfer.getData("text/plain").split(',');
                                var data=ev.dataTransfer.getData("Text");

                                var img = canvas = document.getElementById("img1");
                                var dx = pos[0] - img.offsetLeft;
                                var dy = pos[1] - img.offsetTop;
                                document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), ev.pageX - dx, ev.pageY - dy);
                            }
                    </script>

Ist es wohl zu ein ziehbar Bild, das ich ablegen können, in eine Leinwand. Sobald das Bild in den canvas-Bereich, der Benutzer kann dann verschieben Sie das Bild um. Leider kann ich nicht scheinen, um es funktioniert. Das Bild sollte angezeigt werden, wenn Sie legen Sie es in der Nähe der oberen linken, aber das Bild erscheint in der unteren rechten.

Wie kann ich dieses problem beheben?

InformationsquelleAutor user3298953 | 2014-02-11
  1. 5

    Können Sie html5 draggable zum löschen einer Bild-element auf der Leinwand.

    Dann können Sie drawImage eine Kopie des Bildes auf der Leinwand.

    Sie benötigen diese info, um zu zeichnen eine Kopie des ziehbar Bild auf Leinwand:

    • Die Maus-position relativ zu den draggable Bild (siehe mousedown unten)

    • Canvas-position relativ zu dem Dokument (canvasElement.offsetLeft & canvasElement.offsetTop).

    • Die Maus-position relativ zu dem Dokument, an der Tropfen ( dropEvent.clientX & dropEvent.clientY )

    • Die Id des draggable-element (gespeichert und abgerufen dragEvent.dataTransfer)

    Mit dieser info können Sie die Methode drawImage eine Kopie der draggable-element wie diesem:

    function drop(ev) {
    ev.preventDefault();

    var dropX=ev.clientX-canvasLeft-startOffsetX;
    var dropY=ev.clientY-canvasTop-startOffsetY;
    var id=ev.dataTransfer.getData("Text");
    var dropElement=document.getElementById(id);

    //draw the drag image at the drop coordinates
    ctx.drawImage(dropElement,dropX,dropY);
}

    Hier ist der Beispiel-code und eine Demo: http://jsfiddle.net/m1erickson/WyEPh/

    <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #graphCanvas{border:1px solid #000000;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("graphCanvas");
    var ctx=canvas.getContext("2d");
    var canvasLeft=canvas.offsetLeft;
    var canvasTop=canvas.offsetTop;
    canvas.ondrop=drop;
    canvas.ondragover=allowDrop;
    //
    var img=document.getElementById("img1");
    img.onmousedown=mousedown;
    img.ondragstart=dragstart;

    //this is the mouse position within the drag element
    var startOffsetX,startOffsetY;

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function mousedown(ev){
        startOffsetX=ev.offsetX;
        startOffsetY=ev.offsetY;
    }

    function dragstart(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();

        var dropX=ev.clientX-canvasLeft-startOffsetX;
        var dropY=ev.clientY-canvasTop-startOffsetY;
        var id=ev.dataTransfer.getData("Text");
        var dropElement=document.getElementById(id);

        //draw the drag image at the drop coordinates
        ctx.drawImage(dropElement,dropX,dropY);
    }


}); //end $(function(){});
</script>
</head>
<body>
    <canvas id="graphCanvas" height=300 width=300></canvas>
    <img id="img1" src="house32x32.png" draggable="true" />        
</body>
</html>

    Jedoch...Bilder, gezeichnet auf der Leinwand sind nur gemalt, Pixel und daher nicht gezogen werden kann

    Können Sie eine Leinwand Bibliothek, wie KineticJS zu schaffen "beibehalten" Bilder, die gezogen werden können, nachdem Sie gezeichnet auf die Leinwand.

    Hier ist eine Demo mit KineticJS zu ermöglichen, fiel Bilder später gezogen werden, um die Leinwand:

    http://jsfiddle.net/m1erickson/LuZbV/

    InformationsquelleAutor markE
Schreibe einen Kommentar