Использование Raphael JS для перемещения фигур по экрану - PullRequest
Новая
       35

Использование Raphael JS для перемещения фигур по экрану

2 голосов
/ 28 августа 2009

Я работаю над тем, чтобы некоторые фигуры плавали по экрану наугад. В конце концов они будут взаимодействовать друг с другом, а также будут иметь функции onclick. Я могу заставить круги отображаться на экране, но не могу заставить их двигаться. Кажется, что функция .animate () мне здесь не нужна.

Кто-нибудь знает, как мне поступить?

Вот что у меня есть: 

jQuery(function ($) {

    // Global Vars
    var items = 30,
    width = window.innerWidth,
    height = window.innerHeight,
    paper = Raphael("galaxy", width, height),
    frameRate = 100,
    i,
    galaxy = [],
    star = [],
    stars = [];

    // Do some variants for each item
    for (i = 0; i<items; i++ ) {
        stars[i] = {
            x : Math.random() * width,
            y : Math.random() * height,
            r : Math.random()*255,
            g : Math.random()*255,
            b : Math.random()*255,
            size :  Math.random() * 20
        }
    }

    // Creates canvas 320 × 200 at 10, 50
    // Creates circle at x = 50, y = 40, with radius 10
    for (i = 0; i<items; i++ ) {
        star[i] = paper.circle(stars[i].x, stars[i].y, stars[i].size);
        star[i].attr("fill", "rgb("+stars[i].r+", "+stars[i].g+", "+stars[i].b+")");
        star[i].attr("stroke", "none"); 

    }//end for

});

1 Ответ

3 голосов
/ 28 августа 2009

это может работать с animate (). Если вы, например, добавьте это к вышеуказанной функции: 

(function anim() {
    for (i = 0; i<items; i++ ) {
         newX = Math.random() * width;
         newY = Math.random() * height;
         star[i].animate({cx: newX, cy: newY}, 1000);
    }
    setTimeout(anim, 1000);
})();

твои круги летают. Конечно, это еще долгий путь, чтобы заставить их действительно плавать или даже взаимодействовать, но это может быть отправной точкой.

...