Tweening a Kineticjs Shape

Question

У меня есть пользовательская форма, созданная в Kineticjs, и мне нужна форма для анимации, как линия. Как мне это сделать? Я пробовал создать кинетический твин, но, похоже, не работает правильно.

var grnStripe = new Image(); 
grnStripe.onload = start; 
grnStripe.src = 'images/GreenStripe-01.png'; 
function start(){ 
grnLine = new Kinetic.Shape({ 
    sceneFunc: function (context) { 
     var ctx = this.getContext()._context; 
     var pattern = context.createPattern(grnStripe, 'repeat'); 
     ctx.beginPath(); 
     ctx.moveTo(379.5, 270); 
     ctx.lineTo(379.5, 270); 
     ctx.strokeStyle = pattern; 
     ctx.lineWidth = 2.5; 
     ctx.stroke(); 
    } 
}); 
line_layer.add(grnLine); 
line_layer.draw(); 
} 

Я хочу, чтобы форма (линия) для анимации движения в высоту 310. Опять же, я попытался создать Kinetic твин, но это не казалось работать.

Answer 1

Да, вы можете Kinetic.Tween в Kinetic.Shape - даже форму с инсультом рисунком.

[Общий ответ о твининге в Kinetic.Shape]

Ключ к твинингу в Kinetic.Shape оказывает sceneFunc изменения, используя свойство Kinetic.Shape.

Например, этот sceneFunc нарисовал прямоугольник, основанный на свойствах x & y Kinetic.Shape.

sceneFunc: function(context) { 
    var x=this.x(); 
    var y=this.y(); 
    context.fillRect(x,y,20,20); 
}, 

Затем вы можете использовать Kinetic.Tween, чтобы изменить Kinetic.Shapes' х/у, которые в свою очередь, будет анимировать прямоугольник.

Например, эта анимация будет анимировать Kinetic.Shape, называемую myShape, от текущего x/y до и x/y [100,100].

tween = new Kinetic.Tween({ 
    node: myShape, 
    duration: 1, 
    x: 100, 
    y: 100, 
    }); 

[Конкретный ответ, основанный на одном из предыдущих вопросов о модели, погладил линий]

Контекст Kinetic.Shape не позволяет вам нарисовать узор-погладил линию.

В качестве обходного пути вы можете получить фактический контекст html, который позволяет создавать шаблонные строки.

А «ореолы проблема», когда твининг:

Однако, если вы хотите, чтобы этот шаблон промежуточных кадров заполненных линий у вас есть «Ghosting» проблема, потому что на самом деле Kinetic использует 2 холстов для каждого слоя и вашего pattern- заполненная строка неправильно размещена на этом втором холсте-хите («призрак»). Этого можно ожидать, потому что нельзя ожидать, что Kinetic знает, что вы нарисовали в своем реальном контексте html.

Вы можете исправить эту проблему, указав hitFunc в своей пользовательской Kinetic.Shape. Это позволяет Kinetic правильно позиционировать строку, заполненную шаблоном, на ее втором холсте. Отвращение исчезло.

Здесь скрипка демонстрирует обходной путь для вашей картины заполненных линий:

http://jsfiddle.net/m1erickson/GpSbd/