需要一些帮助..我不知道是 kinetic.js 库问题还是我在这里做错了什么..我在 windows.onload 上加载了 2 个图像,然后在画布之外有一组图像和 onclick我将图像放置在画布内工作正常..(我只使用了一个函数通过这样做从画布外部加载任何图像..图像集:
<li>
<a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))">
<img src="<?php echo base_url()?>images/eagle/baby1.png" id="i3" alt="Pulpitrock"width="100" height="120" /></a>
<a href="javascript:void(0)" onclick="removewithType(document.getElementById('i3'))">Close</a>
</li>
<li>
<a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i4'))">
<img src="<?php echo base_url()?>images/eagle/pattern-1.png" id="i4" alt="Pulpit rock" width="100" height="120" /></a>
<a href="javascript:void(0)" onclick="removewithType(document.getElementById('i4'))">Close</a>
</li>
加载图像
function loadWithType(img){
var sources = {
yoda1 : img.src,
};
loadImages(sources,initStage1);
};
功能(定义位置和所有)
function initStage1(images){
layert = new Kinetic.Layer();
var yoda1 = new Kinetic.Image({
image: images.yoda1,
x: 106,
y: 0,
width: 180,
height: 220,
draggable:true,
detectionType: "pixel"
});
/*
* check if animal is in the right spot and
* snap into place if it is
*/
yoda1.on("dragend", function() {
layert.draw();
// disable drag and drop
yoda1.saveImageData();
});
layert.add(yoda1);
stage.add(layert);
yoda1.saveImageData();
}
这工作正常..(点击它们加载图像)
但是当我尝试通过关闭按钮删除图像时..我遇到了问题,因为最新的图像被删除了,并且在该库向我抛出错误之后..我正在做这样的事情..
function removewithType(img){
var sources = {
yoda1 :img.src,
};
loadImages(sources,removeStage1);
}
function removeStage1(images){
var yoda1 = new Kinetic.Image({
image: images.yoda1,
x: 106,
y: 0,
width: 180,
height: 220,
draggable:true,
});
layert.clear();
stage.remove(layert);
layert.draw();
}
首先在这里.. layert.remov(yoda1) 功能不起作用。
这个函数的行为出乎意料..
任何指针
谢谢..