2016-12-15 4 views
1

캔버스에 선을 그릴 때 선 안에 여러 개의 점이 만들어집니다. 캔버스 그리기를 위해 easelJS를 사용하고 있습니다. 첨부 된 스크린 샷을 참조하십시오.불필요한 다중 점 문제가있는 EaselJS 선 그리기

선 그리기 코드는 다음과 같습니다.

green ellipse

둥근 모서리가 조금 간다 (스트로크에 따라 : 한 줄이 한계를 둥글게 있기 때문에 실제로 같이 있도록

Line with multiple dots

scope.init = function(){ 
    stage = new createjs.Stage(element[0].id); 
    stage.enableDOMEvents(true); 
    createjs.Touch.enable(stage); 
    shellWrapper = new createjs.Container(); 
    shellWrapper.id = mainContainerId; 
    shellWrapper.hitArea = new createjs.Shape(new createjs.Graphics().f('#000').dr(0,0,cacheWidth,cacheHeight)); 
    shellWrapper.cache(0,0,cacheWidth,cacheHeight); // Cache it. 
    stage.addChild(shellWrapper); 
    drawing = new createjs.Shape(); 
    shellWrapper.addChild(drawing); 
    stage.update(); 
} 

scope.mouseDown = function(event) { 
    oldX = event.stageX; 
    oldY = event.stageY; 

    shellWrapper.addEventListener('pressmove', function(evt){ 

    drawing.graphics.beginStroke(color) 
     .setStrokeStyle(size, 'round') 
     .moveTo(oldX, oldY) 
     .lineTo(evt.stageX, evt.stageY); 

    oldX = evt.stageX; 
    oldY = evt.stageY; 
    shellWrapper.updateCache(erase?'destination-out':'source-over'); 
    drawing.graphics.clear(); 
    stage.update(); 
    }); 
}; 
+0

그럼 실제 질문은 무엇입니까? –

+0

줄 안에 불필요한 점들이 나타납니다. –

답변

0

이는 일이 너비)를 줄 경계에서 벗어나지 않도록 그립니다. 이 선 오버레이를 사용하면 드로잉에 작은 원이있는 것처럼 보이지만 그렇지 않은 경우 드로잉이 반투명 한 색을 사용하기 때문에 드로잉에 작은 원이있는 것처럼 보입니다.

enter image description here

는이 문제를 해결 불투명 획 색상을 서로 관련하여 완전히 불투명합니다 myDisplayObj.alpha = 0.5;

이 방법은 각각의 라인을 사용하여 전체 도면에 투명성을 추가하지만 그들은 것입니다하려면 장면의 다른 표시 객체에 비해 반 투명합니다.