如何获取画布中图像的ID

Question

I am trying to drag drop image in canvas and i am getting perfect co-ordinates of that image in canvas. 我正在尝试将拖放图像拖放到画布中，并且正在画布中获得该图像的完美坐标。 But i want Id of image which is currently dragged and dropped. 但是我想要当前拖放的图像的ID。 how can we get the Id of image which is curently dragged and dropped in the canvas. 我们如何获取当前在画布中拖放的图像的ID。

this is my code: 这是我的代码：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
        <style>
            body{padding:20px;}
            #container{
                border:solid 1px #ccc;
                margin-top: 10px;
                width:350px;
                height:350px;
            }
            #toolbar{
                width:350px;
                height:35px;
                border:solid 1px blue;
            }
            #buttons > input {
                padding: 10px;
                display: block;
                margin-top: 5px;
            }
            #buttons {
                position: absolute;
                top: 5px;
                left: 10px;
            </style>
        </head>
        <body>
            <script>window.tableIndex = 0;
                window.tablePositionList = [[], []];
            </script>

            <h4>Drag from  onto canvas. Then drag around canvas.</h4>
            <div id="toolbar">
                <img id="house2" class="tool" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg"><input type="hidden" id="house2_hidden" value="">
                <img id="house" class="tool" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/multple/4top.png"><input type="hidden" id="house_hidden" value="">
                <img id="house6" class="tool" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg"><input type="hidden" id="house6_hidden" value="">
                <br>
            </div>
            <div id="container"></div>
            <div id="buttons">
                <input type="button" id="clear" value="Clear">
                <input type="button" id="submit"  value="Submit" >
            </div>

            <script>
//                var $tools = $(".tool");
                //global variable
//                var imageId;
//                imageId = document.getElementById('house2_hidden').value = "house2";
//                imageId = document.getElementById('house_hidden').value = "house";
//                imageId = document.getElementById('house6_hidden').value = "house6";
                var global_image;
                // get a reference to the house icon in the toolbar
                // hide the icon until its image has loaded
                var $house = $("#house");
                $house.hide();

                var $house2 = $("#house2");
                $house2.hide();

                var $house6 = $("#house6");
                $house6.hide()


                // get the offset position of the kinetic container
                var $stageContainer = $("#container");
                var stageOffset = $stageContainer.offset();
                var offsetX = stageOffset.left;
                var offsetY = stageOffset.top;
                // create the Kinetic.Stage and layer
                var stage = new Kinetic.Stage({
                    container: 'container',
                    width: 350,
                    height: 350
                });
                var layer = new Kinetic.Layer();
                stage.add(layer);
                // start loading the image used in the draggable toolbar element
                // this image will be used in a new Kinetic.Image
                var image1 = new Image();
                image1.onload = function () {
                    $house.show();
                };
                var image2 = new Image();
                image2.onload = function () {
                    $house2.show();
                };
                var image3 = new Image();
                image3.onload = function () {
                    $house6.show();
                };
                image1.src = "https://dl.dropboxusercontent.com/u/139992952/multple/4top.png";
                image2.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
                image3.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
                // make the toolbar image draggable
                $("#house").draggable({
                    helper: 'clone',
                    obstacle: "#house",
                    preventCollision: true,
                    containment: 'container'
                });
                $("#house2").draggable({
                    helper: 'clone',
                    obstacle: "#house2",
                    preventCollision: true,
                    containment: 'container'
                });
                $("#house6").draggable({
                    helper: 'clone',
                    obstacle: "#house6",
                    preventCollision: true,
                    containment: 'container'
                });
                // set the data payload
                $house.data("url", "house.png"); // key-value pair
                $house.data("width", "32"); // key-value pair
                $house.data("height", "33"); // key-value pair
                $house.data("image", image1); // key-value pair

                $house2.data("url", "house204-1.jpg"); // key-value pair
                $house2.data("width", "32"); // key-value pair
                $house2.data("height", "33"); // key-value pair
                $house2.data("image", image2); // key-value pair

                $house6.data("url", "house204-1.jpg"); // key-value pair
                $house6.data("width", "32"); // key-value pair
                $house6.data("height", "33"); // key-value pair
                $house6.data("image", image3); // key-value pair

                // make the Kinetic Container a dropzone
                $stageContainer.droppable({
                    tolerance: 'fit',
                    drop: dragDrop
                });

                // handle a drop into the Kinetic container
                function dragDrop(e, ui) {
                    var x = parseInt(ui.offset.left - offsetX);
                    var y = parseInt(ui.offset.top - offsetY);



                    console.log(x);
                    console.log(y);
                    // get the drop payload (here the payload is the image)
                    var element = ui.draggable;
                    var data = element.data("url");
                    var theImage = element.data("image");
                    // create a new Kinetic.Image at the drop point
                    // be sure to adjust for any border width (here border==1)
                    var image = new Kinetic.Image({
                        name: data,
                        x: x,
                        y: y,
                        image: theImage,
                        draggable: true
                    });
                    var x = parseInt(ui.offset.left - offsetX);
                    var y = parseInt(ui.offset.top - offsetY);

                    global_image = image;
                    //
                    layer.add(image);
                    layer.draw();
                    $("#clear").click(function () {

                    });
                    document.getElementById('clear').addEventListener('click', function () {

                    });

                    var x = parseInt(ui.offset.left - offsetX);
                    var y = parseInt(ui.offset.top - offsetY);


                    window.tablePositionList[tableIndex] = [x, y];
                    window.tableIndex++;

                }


            </script>
            <div style="height: 20px;width: 20px;background-color: red;" onclick="getImageValue();">
            </div>
            <script>
                document.getElementById('submit').addEventListener('click', function () {

                    console.log(tablePositionList)
                });
                function getImageValue()
                {
                    console.log("global_image.data");
//                        console.log(tableIndex);
                    global_image.destroy();
                    layer.draw();
//                        var backindex = tableIndex - 1;
//                    window.tablePositionList.remove(tableIndex, 1);
                    window.tablePositionList.pop();
                    window.tableIndex--;

                }
//                function clear() {
//                    console.log("global_image.data");
//                    global_image.destroy();
//                    layer.draw();
//                }
            </script>
        </body>

    </html>

Answer 1

Use ui.draggable.attr('id'); 使用ui.draggable.attr('id'); in your dragDrop function to get the id of the dragged image. 在您的dragDrop函数中获取所拖动图像的ID。

Simple solution for you to get the id of the dragged item. 为您获取被拖动项目的ID的简单解决方案。

var draggedElementID = ui.draggable.attr('id');

Here is the code where you can access it. 这是您可以访问它的代码。

function dragDrop(e, ui) {
    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);


    // Below line gives you the id of the image that is dragged.
    var draggedElementID = ui.draggable.attr('id');



    console.log(x);
    console.log(y);
    // get the drop payload (here the payload is the image)
    var element = ui.draggable;
    var data = element.data("url");
    var theImage = element.data("image");
    // create a new Kinetic.Image at the drop point
    // be sure to adjust for any border width (here border==1)
    var image = new Kinetic.Image({
        name: data,
        x: x,
        y: y,
        image: theImage,
        draggable: true
    });
    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);

    global_image = image;
    //
    layer.add(image);
    layer.draw();
    $("#clear").click(function () {

    });
    document.getElementById('clear').addEventListener('click', function () {

    });

    var x = parseInt(ui.offset.left - offsetX);
    var y = parseInt(ui.offset.top - offsetY);


    window.tablePositionList[tableIndex] = [x, y];
    window.tableIndex++;

}

Answer 2

In your dragDrop function, you have access to element variable which contains the element that is being dragged. 在dragDrop函数中，您可以访问element变量，该变量包含要拖动的元素。 You can access its ID attribute for example like this: 您可以像下面这样访问其ID属性：

element[0].id

or with jQuery: 或使用jQuery：

$(element).attr('id')

Answer 3

Add this script to catch the dragstop event. 添加此脚本以捕获dragstop事件。

$('.tool.ui-draggable').on('dragstop', function(e){ var imgid = $(e.target).attr('id'); console.log(imgid);});

You can capture dragstart / drag events as well. 您也可以捕获dragstart / drag事件。

如何获取画布中图像的ID

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-02-17 07:26:49

解决方案2
0 2015-02-17 07:26:22

解决方案3
0 2015-02-17 07:27:21

如何获取画布中图像的ID

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-02-17 07:26:49

解决方案2 0 2015-02-17 07:26:22

解决方案3 0 2015-02-17 07:27:21

解决方案1
1 已采纳 2015-02-17 07:26:49

解决方案2
0 2015-02-17 07:26:22

解决方案3
0 2015-02-17 07:27:21