gpt4 book ai didi

javascript - KineticJS 图像和矩形未正确分层

转载 作者:行者123 更新时间:2023-12-02 18:32:16 26 4
gpt4 key购买 nike

好吧,我是 KineticJS 的新手,在使用它时,我似乎无法将图像背景与分层在该图像上方的矩形结合起来。现在,如果我删除背景图像,则会显示矩形。即使我将矩形代码放在图像上方,仍然不会显示在顶部。当然,这是我所缺少的简单内容,但我似乎无法弄清楚它是什么,并且在 stackoverflow 上找不到类似的问题。感谢您的帮助。

这是我的代码:

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="container"></div>

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 450
});

//Layer for our background
var background_layer = new Kinetic.Layer();

//Canvas background image
var canvasBackgroundImage = new Image();
canvasBackgroundImage.onload = function() {
var backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: canvasBackgroundImage,
width: 600,
height: 450
});

background_layer.add(backgroundImage);
stage.add(background_layer);
};
canvasBackgroundImage.src = 'images/quiz_back.jpg'; //Location of our background

//Question container
var question_container_layer = new Kinetic.Layer();
var question_container = new Kinetic.Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
question_container_layer.add(question_container);
stage.add(question_container_layer);

</script>
</body>

最佳答案

您的问题是您将 background_layer 添加到 canvasBackgroundImage.onload 函数内的舞台。 JavaScript 将运行整个脚本,并首先将 question_container_layer 添加到舞台,然后当您的图像加载时,background_layer 将添加到舞台。因此,背景图像始终出现在矩形图层的顶部。

要解决此问题,请将图层添加到 onload 函数之外的舞台:

<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 450
});

//Layer for our background
var background_layer = new Kinetic.Layer();
var question_container_layer = new Kinetic.Layer();
stage.add(background_layer);
stage.add(question_container_layer);

//Canvas background image
var canvasBackgroundImage = new Image();
canvasBackgroundImage.onload = function() {
var backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: canvasBackgroundImage,
width: 600,
height: 450
});
background_layer.add(backgroundImage);
background_layer.draw();
};
canvasBackgroundImage.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Location of our background

//Question container

var question_container = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 200,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
question_container_layer.add(question_container);

question_container_layer.draw();

</script>

为了避免将来出现这种情况,除非您要将动态图层添加到舞台中,否则我建议在执行其他操作之前将所有已知图层添加到舞台中。这样您就可以控制图层的顺序。

或者,您可以使用 zIndex 属性对图层进行排序。参见这里:Kinetic.Container#setZIndex

关于javascript - KineticJS 图像和矩形未正确分层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17690441/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com