Прокрутка фона с Рафаэлем JS

Я пытаюсь использовать Raphael.js, чтобы сделать небольшую игру, и я хочу, чтобы игра имела фон прокрутки, чтобы он казался бесконечным. Я сделал фон с помощью объекта Рафаэля:

var paper = new Raphael($('#canvas'), 0, 0);
var c = paper.image("sky.jpg", 0, 0, 1000, 1000);
paper.setSize(1000,1000);

но я не могу на самом деле переместить изображение по его координатам х или даже перерисовать изображение. Я старался:

paper._left = -2000;
c.attrs.x = -2000;
paper.image("sky.jpg", -2000, 0, 1000, 1000);
var d = document.getElementById('canvas');
d.left = -2000;

и я не могу заставить его двигаться. Я просто хочу поместить это утверждение в какой-то цикл, чтобы он постоянно уменьшал координату X или что-то подобное.

Источник

2 ответа

Решение

Использовать .attr() метод, предоставленный Рафаэлем вместо.

Использование может передать объект вместо, так как вы можете установить как минимум x а также y значения для этого.

c.attr({
    x: -2000
});

jsFiddle: http://jsfiddle.net/terryyounghk/EmGeE/

Ссылка: http://raphaeljs.com/reference.html

Источник

Вы не можете переместить бумагу (не перемещая все). Итак, чтобы сделать фон прокрутки, вы должны сделать это:

  • Сделайте большой плохой элемент (квадрат или группу).
  • Поместите фон в это.
  • Переместите элемент на бумаге.

Я предлагаю вам создать группу для этого (элемент ag), так как вы можете добавить другие вещи позже. Элемент "g" не определен в Рафаэле, но вы можете использовать его с обычным js+svg, или вы можете расширить Рафаэль, если вы чувствуете желание сделать это.

Примечание 1: Поскольку вы сказали, что создаете игру, я чувствую необходимость сказать вам, что у меня произошли некоторые раздражающие утечки памяти с Рафаэлем (что-то о путях... точно не помню). Например, "полярные часы" в примерах "Рафаэля" имели утечку на Firefox. Я не обязательно говорю, что у вас возникнет та же проблема, но я предлагаю некоторым взглянуть на некоторые вещи из канвы, прежде чем вы начнете (взгляните на три js: http://threejs.org/). Основным преимуществом будет то, что он сделан над web gl и гораздо более оптимизирован, а также с использованием видеоплаты, ведьма Рафаэль не делает.

Примечание 2: Я поставлю код через 4-5 часов, когда я вернусь домой, если ты не узнал его к тому времени. Комментарий, если вы сделали, пожалуйста;)

Источник
Другие вопросы по тегам