서로 그린 선은 HTML5 캔버스에서 두껍고 두껍게 만듭니다.

Question

그래서 저는 캔버스에서 그림을 그리기 위해 잠시 동안 작업 해 왔습니다. 캔버스 전체에 KineticJS 라이브러리를 사용하고 있지만 문제가되지 않는다고 생각합니다. 프로젝트의 한 부분은 요소를 연결하기 위해 선을 그려야하고, 때로는이 선들이 서로에 대해 그려지므로 다른면을 다루기 때문에 여기에 문제가 발생합니다. 단지 문제를 다루는 것이 아니라 두껍고 두껍게 만듭니다. 차이를 실제로 볼 수 있습니다.

누구든지 동일한 문제를 만났 으면 저를 도울 수 있습니까? :) 그것은 정상적인 행동입니까? 사용 중지 할 수 있습니까? 라인의 ..

그림을 이미 그린 라인 계산하고 여기에 옵션이 정말없는 전에 그려진 경우 확인하기 때문에 :

는

(상단에 두 번만 그려집니다 하지만 바닥에 두 사람은 여러 번 그려집니다.

사전에 감사!

EDIT 1

그래서 여기에이 선을 그리는 코드 부분이 있습니다.

var stage = new Kinetic.Stage({ 
    container: _this.containerId, 
    width: _this.options.fitWindow?window.innerWidth:0, 
    height: _this.options.fitWindow?window.innerHeight-5-61:0, 
    draggable: true, 
    dragDistance: 10 
}); 

var layer = new Kinetic.Layer();  
stage.add(layer); 

var conns = new Kinetic.Group(), 
    points = [0,10,100,10]; 

conns.add(new Kinetic.Line({ 
    points: points, 
    strokeWidth: 1, 
    stroke: '#db9e36', 
    listening: false 
})); 

conns.add(new Kinetic.Line({ 
    points: points, 
    strokeWidth: 1, 
    stroke: '#db9e36', 
    listening: false 
})); 

layer.add(conns); 
stage.draw(); 

Answer 1

동일한 포인트 변수를 사용하여 2 줄을 만듭니다.

// one set of points 
points = [0,10,100,10]; 

이렇게하면 두 줄이 같은 위치에 그려집니다.

따라서 두꺼운 선은 실제로 여러 선을 서로 위에 그립니다.

// first line using points variable 
conns.add(new Kinetic.Line({ 
    points: points, 
    strokeWidth: 1, 
    stroke: '#db9e36', 
    listening: false 
})); 

// second line using the same points variable 
// this causes your 2 identical lines to be drawn--resulting in 1 thicker line 
conns.add(new Kinetic.Line({ 
    points: points, 
    strokeWidth: 1, 
    stroke: '#db9e36', 
    listening: false 
}));