彼此绘制的线条使其在HTML5画布中更厚更厚

Question

所以当我需要画布画时，我已经在一个项目上工作了一段时间。我使用KineticJS lib作为整个画布的东西，但我认为这不是我的问题的根源。所以项目的一部分是我需要绘制线条来连接元素，有时这些线条相互绘制，所以一个覆盖另一个，这就是我的问题，它不仅仅是简单地覆盖它，而是它变得更厚更厚能真正看出差异。

如果有人遇到同样的问题你能帮帮我吗？ :)这是正常的行为吗？我可以禁用吗？因为计算已绘制的线并检查它是否之前绘制在这里实际上不是一个选项..

线条图片：

（顶部的两个只绘制一次，但底部的两个绘制多次。

提前致谢！

编辑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];

这会导致您的2行被绘制在同一个地方。

因此，你的粗线实际上是相互重叠的多条线。

// 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
}) );