gpt4 book ai didi

javascript - Kinetic.js 动画包含形状和文本的多个组

转载 作者:行者123 更新时间:2023-11-28 00:03:40 29 4
gpt4 key购买 nike

我是 Kinetic.js 的新手。我正在尝试创建一系列随机移动的组,每个组包含一颗星和一个标题。这是当前的草图:http://jsfiddle.net/dCw9e/ .

我不明白为什么每个组对象在动画中都有一组独特的边界。谁能阐明我在这里缺少的东西?为什么每个组的界限不一样?即父容器的边界。

这是动画:

var anim = new Kinetic.Animation(函数(帧){

newtime = frame.time;

// Acceleration due to gravity via time delay (chunks miliseconds)
if((newtime - oldtime) > framerate) { // every N milliseconds... (this emulated a frame rate)
oldtime = newtime;

var angularSpeed = Math.PI / 2;
var angleDiff = [];


var stage = MilestonesGame.stage;
var stageKids = stage.getChildren();
var starsLayer = stageKids[1];
var stars = [];
stars = starsLayer.getChildren();
//console.log(stars[1].getX());

for(var n= 0; n < groups.length; n++){
angleDiff[n] = frame.timeDiff * angularSpeed / 10000 * rotDir[n];
}


for(var j = 0; j < groups.length; j++) {



/* Bounce stars off all stage parameter boundaries */

// floor boundary
if(groups[j].getY() > floor) {groups[j].setY(floor);}
if(groups[j].getY() == floor) {

$(window).resize(_.debounce(function(){
floor = MilestonesGame.stage.getHeight()-7;
}, 300));

yvel[j] *= -1;

}

//Ceiling boundary
if(groups[j].getY() < cieling){groups[j].setY(cieling);}
if(groups[j].getY() == cieling){

yvel[j] *= -1;

}
// right wall
if(groups[j].getX() > rightwall) {groups[j].setX(rightwall);}
if(groups[j].getX() == rightwall) {

$(window).resize(_.debounce(function(){
rightwall = MilestonesGame.stage.getWidth()-7;
}, 300));

xvel[j] *= -1;
}
// left wall
if(groups[j].getX() < leftwall) {groups[j].setX(leftwall);}
if(groups[j].getX() == leftwall) {

xvel[j] *= -1;
}

groups[j].setX(groups[j].getX() + xvel[j]);
groups[j].setY(groups[j].getY() + yvel[j]);
//stars[i].rotate(angleDiff[i]);
}
}

}, this.starsLayer);动画开始();

谢谢,乔恩

最佳答案

任何组的原点 [x,y] 默认为相对于其父组的 [0,0]。

在您的情况下,每个组的父级都是舞台。

所以你所有的团体起源——他们的 x/y,都是相对于舞台的。

一些观察...

将您的调整大小事件处理程序置于任何循环之外(如果在循环内则不好的做法)。

// resizing handler -- never put this in a loop!

$(window).resize(_.debounce(function(){
rightwall = MilestonesGame.stage.getWidth();
floor = MilestonesGame.stage.getHeight();
}, 300));

让你的边界是全尺寸的,这样你以后可以轻松地调整你的星星的大小

// boundaries -- leave boundaries full width/height
// which lets you resize each star later

var leftwall = 0;
var rightwall = MilestonesGame.stage.getWidth();
var floor = MilestonesGame.stage.getHeight();
var cieling = 0;

您的边界 HitTest 可以像这样重构以提高性能和清晰度:

// Bounce stars off all stage parameter boundaries 

for(var j = 0; j < groups.length; j++) {


// temp save often used array references in vars

var group=groups[j];
var x=group.getX();
var y=group.getY();
var r=group.getOuterRadius();

// ceiling boundary

if(y-r<=cieling) {
y=cieling+r;
yvel[j] *= -1;
}

// floor boundary

if(y+r>=floor) {
y=floor-r;
yvel[j] *= -1;
}

// left boundary

if(x-r<=leftwall) {
x=leftwall+r;
xvel[j] *= -1;
}

// left and right boundary

if(x+r>=rightwall) {
x=rightwall-r;
xvel[j] *= -1;
}

// move this star
group.setX(x + xvel[j]);
group.setY(y + yvel[j]);

}

关于javascript - Kinetic.js 动画包含形状和文本的多个组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19821611/

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