EaselJS - 라인에 BlurFilter를 추가 할 수 있습니까?

easelJS를 사용하여 한 줄에 흐림 효과를 추가하려고합니다. 필자는 createJS 문서에서 BlurFilter 데모를 따르고 있습니다 (단, 줄 대신 원을 사용한다는 점을 제외하고는). 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}

당신이 당신의 cache 전화 50 100에이 값을 추가하는 경우, 그것은 여전히 당신을 제공 할 것입니다 경계선에는 사용자가 만든 그래픽이 포함되지 않습니다. 보다 정확한 뭔가는 다음과 같습니다

// 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를 추가 할 수 있습니까?

답변

관련 문제