如何获取 canvas 中的图像 ID
How to get Id of image in canvas
我正在尝试在 canvas 中拖放图像，并且我在 canvas 中获得了该图像的完美坐标。但我想要当前被拖放的图像的 Id。
我们如何获取当前拖放到 canvas.
中的图像的 Id
这是我的代码：
<!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/Whosebug/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/Whosebug/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/Whosebug/house204-1.jpg";
image3.src = "https://dl.dropboxusercontent.com/u/139992952/Whosebug/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>
在您的 dragDrop 函数中，您可以访问包含被拖动元素的 element 变量。
您可以访问其 ID 属性，例如：
element[0].id
或 jQuery:
$(element).attr('id')
在您的 dragDrop 函数中使用 ui.draggable.attr('id'); 来获取拖动图像的 ID。
简单的解决方案，让您获得拖动项目的 id。
var draggedElementID = ui.draggable.attr('id');
这是您可以访问它的代码。
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++;
}
添加此脚本以捕获 dragstop 事件。
$('.tool.ui-draggable').on('dragstop', function(e){ var imgid = $(e.target).attr('id'); console.log(imgid);});
您也可以捕获 dragstart / drag 事件。
我正在尝试在 canvas 中拖放图像，并且我在 canvas 中获得了该图像的完美坐标。但我想要当前被拖放的图像的 Id。 我们如何获取当前拖放到 canvas.
中的图像的 Id这是我的代码：
<!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/Whosebug/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/Whosebug/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/Whosebug/house204-1.jpg";
image3.src = "https://dl.dropboxusercontent.com/u/139992952/Whosebug/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>
在您的 dragDrop 函数中，您可以访问包含被拖动元素的 element 变量。
您可以访问其 ID 属性，例如：
element[0].id
或 jQuery:
$(element).attr('id')
在您的 dragDrop 函数中使用 ui.draggable.attr('id'); 来获取拖动图像的 ID。
简单的解决方案，让您获得拖动项目的 id。
var draggedElementID = ui.draggable.attr('id');
这是您可以访问它的代码。
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++;
}
添加此脚本以捕获 dragstop 事件。
$('.tool.ui-draggable').on('dragstop', function(e){ var imgid = $(e.target).attr('id'); console.log(imgid);});
您也可以捕获 dragstart / drag 事件。