EaselJS - Можно ли добавить BlurFilter в строку?

Я пытаюсь добавить эффект размытия в одну строку, используя easelJS. Я слежу за демонстрацией BlurFilter в документах createJS (за исключением того, что они используют круг вместо строки). Моя форма полностью исчезает, если я не удалю вызов shape.cache. Возможно ли это с помощью линии или размытие ограничено формами?EaselJS - Можно ли добавить BlurFilter в строку?

function drawShape() { 
    var shape = new createjs.Shape(); 
    shape.graphics.setStrokeStyle(10, "round") 
    .beginStroke(colorPalette.shape[0]) 
    .beginFill(colorPalette.shape[0]) 
    .moveTo(200,400) 
    .lineTo(1500,400); 
    shape.cursor = "pointer"; 

    var blurFilter = new createjs.BlurFilter(50, 50, 1); 
    shape.filters = [blurFilter]; 
    var bounds = blurFilter.getBounds(); 
    shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height); // Code works if I remove this line 

    updateStage(shape); // Utility function that calls addChild and update on stage 
}

<body onload="init()" onresize="resize()"> 
     <!-- App --> 
     <canvas id="canvas"></canvas> 
</body>

источник

2016-07-03 Eric M.

Проблема здесь в том, что shapes have no bounds, и вы просто добавив размытия границ на сгенерированных размытия границ. Если вы осмотрите bounds в своей скрипке, вы увидите, что она просто возвращается количеством размытия в любом направлении:

// blurFilter.getBounds() 
Rectangle {x: -51, y: -51, width: 102, height: 102}

Если добавить эти значения в 50 и 100 в вашем cache вызова, он все равно будет предоставить вам которые не включают в себя графику, которую вы создали. Что-то более точным будет:

// Add in the offset position of the graphics and the coords of the shape 
shape.cache(200 - 5 + bounds.x, 400 - 5 + bounds.y, 1300 + 10 + bounds.width, 10 + bounds.height);

Обратите внимание, что -5 и +10 учетом ширины линии.

Вот обновленная скрипка, где я установить «границу» на самой форме, а затем добавить эти границы в вызов кэша: http://jsfiddle.net/lannymcnie/cevymo3w/1/

Надежды, что дает некоторое представление.

источник

2016-07-04 15:36:31 Lanny

Спасибо! Это объясняет это часами. –

EaselJS - Можно ли добавить BlurFilter в строку?

ответ

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