我在使用kineticJS创建多个阶段时遇到了一个问题。
我正在尝试导出多个＆＃34;阶段＆＃34;对于图像，但我无法通过导出第一阶段，datatoURL函数似乎没有工作，它打破了我的脚本，或者我可能在错误的位置调用它... 当用户单击“保存”按钮时，每个阶段都应转换为图像并显示在同一页面上。
有谁能告诉我为什么第一阶段没有在页面上显示为图像？
提前致谢
以下是将舞台数据放入页面上的图像占位符的代码。
document.getElementById('save').addEventListener('click', function() {
stage.toDataURL({
callback: function(dataUrl) {
document.getElementById("canvasimg").src = dataUrl;
document.getElementById("canvasimg").style.display = "inline";
}
});
}, false);
下面是完整的代码：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Canvas</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
var highlightWidth = 8;
var stage = new Kinetic.Stage({
container: 'container1',
width: 300,
height: 100
});
var layer = new Kinetic.Layer();
stage.add(layer);
document.getElementById('save').addEventListener('click', function() {
stage.toDataURL({
callback: function(dataUrl) {
document.getElementById("canvasimg").src = dataUrl;
document.getElementById("canvasimg").style.display = "inline";
}
});
}, false);
var dropzone = new Kinetic.Stage({
container: 'container2',
width: 300,
height: 100
});
var dropLayer = new Kinetic.Layer();
dropzone.add(dropLayer);
addBackground(stage, layer, dropLayer);
layer.draw();
addBackground(dropzone, dropLayer, layer);
dropLayer.draw();
var stage2 = new Kinetic.Stage({
container: 'container3',
width: 300,
height: 100
});
var layer2 = new Kinetic.Layer();
stage2.add(layer2);
var dropzone2 = new Kinetic.Stage({
container: 'container4',
width: 300,
height: 100
});
var dropLayer2 = new Kinetic.Layer();
dropzone2.add(dropLayer2);
addBackground(stage2, layer2, dropLayer2);
layer2.draw();
addBackground(dropzone2, dropLayer2, layer2);
dropLayer2.draw();
var images = {};
var URLs = {
house1: 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-3.jpg',
house2: 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-4.jpg',
house3: 'https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg'
};
loadImages(URLs, start);
function start() {
var house1 = kImage(images.house1, 10, 10, 50, 50, layer);
var house2 = kImage(images.house2, 75, 10, 50, 50, layer);
var house3 = kImage(images.house3, 140, 10, 50, 50, layer);
layer.draw();
var house1 = kImage(images.house1, 10, 10, 50, 50, dropLayer);
var house2 = kImage(images.house2, 75, 10, 50, 50, dropLayer);
var house3 = kImage(images.house3, 140, 10, 50, 50, dropLayer);
dropLayer.draw();
var house1 = kImage(images.house1, 10, 10, 50, 50, layer2);
var house2 = kImage(images.house2, 75, 10, 50, 50, layer2);
var house3 = kImage(images.house3, 140, 10, 50, 50, layer2);
layer.draw();
var house1 = kImage(images.house1, 10, 10, 50, 50, dropLayer2);
var house2 = kImage(images.house2, 75, 10, 50, 50, dropLayer2);
var house3 = kImage(images.house3, 140, 10, 50, 50, dropLayer2);
dropLayer.draw();
}
function swapStagesIfSelected(sourceLayer, destinationLayer, startX, startY) {
var elements = sourceLayer.get("Image");
var totalWidth = 0;
var maxHeight = -999;
var layerWidth = destinationLayer.getStage().getWidth();
var layerHeight = destinationLayer.getStage().getHeight();
for (var i = 0; i < elements.length; i++) {
if (elements[i].isSelected) {
totalWidth += elements[i].getWidth();
maxHeight = Math.max(elements[i].getHeight(), maxHeight);
}
}
if (startX + totalWidth > layerWidth) {
startX = layerWidth - totalWidth - 15;
}
if (startY + maxHeight > layerHeight) {
startY = layerHeight - maxHeight - 15;
}
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.isSelected) {
var img = element.getImage();
kImage(img, startX, startY, element.getWidth(), element.getHeight(), destinationLayer);
startX += element.getWidth() + 10;
element.remove();
}
}
sourceLayer.draw();
destinationLayer.draw();
}
function kImage(image, x, y, width, height, theLayer) {
var image = new Kinetic.Image({
image: image,
x: x,
y: y,
width: width,
height: height,
strokeWidth: 0,
stroke: "white",
draggable: true
});
image.myLayer = theLayer;
image.isSelected = false;
image.on("click", function () {
this.myLayer.draw();
});
image.myLayer.add(image);
return (image);
}
function addBackground(theStage, theLayer, otherLayer) {
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: theStage.getWidth(),
height: theStage.getHeight(),
fill: "white",
stroke: "blue",
strokeWidth: 1
});
background.on("click", function () {
var pos = theStage.getMousePosition();
var mouseX = parseInt(pos.x);
var mouseY = parseInt(pos.y);
swapStagesIfSelected(otherLayer, theLayer, mouseX, mouseY);
});
theLayer.add(background);
}
function loadImages(URLs, callback) {
var loaded = 0;
var needed = 0;
for (var url in URLs) {
needed++;
console.log(url);
}
for (var url in URLs) {
images[url] = new Image();
images[url].onload = function () {
if (++loaded >= needed) {
callback(images);
}
};
images[url].src = URLs[url];
}
}
});
</script>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container4"></div>
<img style="background:url(test1.png);" id="canvasimg" style="display:none;">
<button id="save">Save as image</button>
</body>
</html>