Javascript 将HTML元素与已创建的对象绑定
我想使用libraryJavascript 将HTML元素与已创建的对象绑定,javascript,jquery,html,kineticjs,Javascript,Jquery,Html,Kineticjs,我想使用libraryKinetic.js在画布上添加图像 创建画布后，图像从数据库加载。如何将此画布与在画布之后创建的元素绑定 HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Design</title> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/li
Kinetic.js在画布上添加图像
创建画布后，图像从数据库加载。如何将此画布与在画布之后创建的元素绑定
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design</title>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/v4.2.0/kinetic-v4.2.0.min.js" type="text/javascript"></script>
<style>
#wrapper{
width:300px;
height:200px;
margin:auto;
border-radius: 15px;
border: 4px solid black;
}
#container{
height:120px;
width:100%;
border:1px solid red;
}
#items, #cliparts{
height:55px;
border:1px solid green;
width:100%;
}
#items img, #cliparts img {
max-height:50px;
max-width:40px;
padding: 0 5px;
border:2px double white;
}
#items img:hover, #cliparts img:hover{
border:2px double blue;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container"> </div>
<div id="cliparts">
</div>
</body>
</html>
设计
#包装纸{
宽度：300px；
高度：200px；
保证金：自动；
边界半径：15px；
边框：4倍纯黑；
}
#容器{
高度：120px；
宽度：100%；
边框：1px纯红；
}
#项目#零件{
高度：55px；
边框：1px纯绿色；
宽度：100%；
}
#项目img，#零件img{
最大高度：50px；
最大宽度：40px；
填充：0 5px；
边框：2倍白色；
}
#项目img:hover，#cliparts img:hover{
边框：2件双蓝；
光标：指针；
}
JavaScript
$(function() {
var stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
var layer = new Kinetic.Layer();
var clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
});
$('#cliparts').append('<img class="clips" id="clip1" src="http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png">');
$('#clip1').live('click', function(){
var imgObj = new Image();
imgObj.src= 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';
imgObj.onload = function(){
var clip_image = new Kinetic.Image({
x: 0,
y: 0,
image: imgObj,
width: 150,
height: 138,
name: "image",
});
// how to access the following elements
clip_group.add(clip_image);
layer.add(clip_group);
stage.add(layer);
stage.draw();
};
});
$（函数（）{
var阶段=新的动力学阶段({
容器：“容器”，
宽度：300，
身高：100
});
var layer=新的动能层（）；
var clip_group=新动力组({
x:20，
y:10，
真的，
});
});
$（'#cliparts'）。附加（''）；
$（'#clip1'）.live（'click'，function（））{
var imgObj=新图像（）；
imgObj.src=http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';
imgObj.onload=函数（）{
var clip_image=新的动能图像({
x:0,，
y:0，
图片：imgObj，
宽度：150，
身高：138，
名称：“图像”，
});
//如何访问以下元素
剪辑组。添加（剪辑图像）；
图层添加（剪辑组）；
阶段。添加（层）；
stage.draw（）；
};
});
我不是JQuery的人，不擅长技术术语，因此如果我在解释中出错，请原谅，但请放心，代码会起作用的；）
$（a）
就像说window.onload doa
，你说a
是一个匿名函数。
对于匿名函数，其中的任何变量将仅在其自身范围内，而不是窗口
或全局。
稍后，您将尝试将这些变量视为全局变量或窗口范围内的变量。
因此…您可以将所有代码移动到该函数中，也可以在该函数中使希望在其外部访问的变量成为全局变量。
这里有几个例子
将window对象传递给匿名函数，并声明要对其执行全局操作的变量
$(function(a) {
a.stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
a.layer = new Kinetic.Layer();
a.clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
}(window));
直接针对窗口对象声明变量
$(function() {
window.stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
window.layer = new Kinetic.Layer();
window.clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
});
将所有内容都放在onload函数中
$(function() {
window.stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 100
});
window.layer = new Kinetic.Layer();
window.clip_group = new Kinetic.Group({
x: 20,
y: 10,
draggable: true,
});
$('#cliparts').append('<img class="clips" id="clip1" src="http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png">');
$('#clip1').live('click', function() {
var imgObj = new Image();
imgObj.src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';
imgObj.onload = function() {
var clip_image = new Kinetic.Image({
x: 0,
y: 0,
image: imgObj,
width: 150,
height: 138,
name: "image",
});
// how to access the following elements
clip_group.add(clip_image);
layer.add(clip_group);
stage.add(layer);
stage.draw();
};
});
});
$（函数（）{
window.stage=新的动能.stage({
容器：“容器”，
宽度：300，
身高：100
});
window.layer=新的动能.layer（）；
window.clip_group=新动能组({
x:20，
y:10，
真的，
});
$（'#cliparts'）。附加（''）；
$（'#clip1'）.live（'click'，function（））{
var imgObj=新图像（）；
imgObj.src=http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';
imgObj.onload=函数（）{
var clip_image=新的动能图像({
x:0,，
y:0，
图片：imgObj，
宽度：150，
身高：138，
名称：“图像”，
});
//如何访问以下元素
剪辑组。添加（剪辑图像）；
图层添加（剪辑组）；
阶段。添加（层）；
stage.draw（）；
};
});
});
这段代码出了什么问题？我想把舞台从初始化的功能中移到外面你是救生员：）。。非常感谢。前两个考试是给我的：）