gpt4 book ai didi

javascript - TweenJS 绝对位置(to()方法)不起作用

转载 作者:行者123 更新时间:2023-11-28 16:59:31 25 4
gpt4 key购买 nike

有人告诉我补间对象中的 .to() 方法将图形对象移动到 Canvas 上的精确点。但是,当我运行下面的代码时,.to() 方法将 400 像素添加到圆的原始 x 位置,即 165。因此,圆将变为 565,但我希望它在 Canvas 上变为 400 像素。任何人都知道为什么会这样,我可以做些什么来让它在 Canvas 上达到 400 像素?

<html>
<title>Pool Game</title>
<head>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>

<script>

function init(){
stage = new createjs.Stage("myCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("blue");
circle.graphics.drawCircle(165, 250, 25);
stage.addChild(circle);
stage.update();
createjs.Tween.get(circle, {loop: false})
.to({ x: 400}, 1000);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}

</script>

</head>
<body onload="init();">
<canvas id="myCanvas" width="1000" height="500"></canvas>
</body>

</html>

最佳答案

这是因为您通过 drawCircle 调用的第一个参数将圆的中心点设置为 165。在此处查看文档:http://www.createjs.com/docs/easeljs/classes/Graphics.html#method_drawCircle

你应该做类似的事情

circle.graphics.drawCircle(0, 0, 25);
circle.x = 165;
circle.y = 250;

关于javascript - TweenJS 绝对位置(to()方法)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31541888/

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