2014-09-01 2 views
0

Я работаю над проектом, где я комбинировал KineticJS с SignalR, чтобы обновить сцену на серверах.Непрозрачность увеличивается с каждым вызовом

До сих пор все было очень хорошо, и за то, что не сработало, я очень помог с вопросами и ответами на SO.

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

В основном я динамически генерировать сценарий инициализации для стадии KineticJS (это все работает отлично) выходной код выглядит следующим образом:.

var stage = new Kinetic.Stage({ 
    id: 1, 
    container: 'stage-container', 
    width: self.baseWidth, 
    height: self.baseHeight 
}); 

И для формы она выглядит следующим образом:

var shape129 = new Kinetic.Line({ 
    id: 'shape129', 
    points: [249,66, 1889,66, 1889,928, 249,928, 249,66], 
    fill: '#DADADA', 
    opacity: 1, 
    stroke: '#3B5A99', 
    strokeWidth: 0, 
    closed: true, 
    draggable: true 
}); 

Пока все хорошо.

Все это отлично.

Затем происходит волшебство, и я использую метод SignalR изменить цвет формы С помощью следующего кода я получаю прекрасные цветные переключатели, но не желаемая непрозрачность:

signal.client.statuschange = function (id, message) { 
    var shape = Kinetic.stages[0].find('#' + id); 
    shape.setAttr('fill', message); 
    shape.setOpacity(0.5); 
    shape.getLayer().draw(); 
}; 

Как я сказал, что изменения цвета но непрозрачность увеличивается с каждым вызовом метода.

Я немного потерялся здесь и не уверен, что происходит, и больше всего. Почему это происходит.

Любая помощь будет очень признательна!

+0

Является ли форма автоматически очищена кинетикой перед розыгрышем? В противном случае постоянная перерисовка без очистки предыдущей графики будет складываться, и вы получите эффект, который вы описываете. Постскриптум Я не знаком с Кинетикой, поэтому мои предположения могут быть неправильными. – package

+0

Я не знаю много о kinetikJS и SignalR, но «увеличение непрозрачности» заставляет меня думать, что, возможно, вы не очищаете полотно на каждом кадре, и поэтому формы перекрываются, а непрозрачность увеличивается. –

+0

Я не делаю новую форму. Я просто обновляю уже существующую форму. Кроме того, я не уверен, как очистить предыдущую графику. Поскольку это никогда не выполняется в учебниках, например. [html5canvastutorials] (http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-alpha-with-kineticjs/) – Pmleader

ответ

1

Я думаю проблема в find функция. Ваш shape не является узлом, а коллекцией. Попробуйте следующее:

var shape = Kinetic.stages[0].find('#' + id)[0]; 
+0

Действительно! Я так рад, что он наконец работает. – Pmleader

Смежные вопросы