Javascript 在画布上绘制笔划后，将笔划添加到另一个对象会更改所有笔划

在一种映射门户上工作。一直在使用教程：@SimonSarris

进展顺利，但我遇到了路径笔划问题。我一直试图找到需要添加

beginPath（）

的位置，以确保在选择形状时，背景中的网格线不会更改为相同的

lineWidth

值。到目前为止，有很多代码，我在这里运行：

添加形状时，我会看到：

选择并移动形状时，我会看到：

以下是我的代码的基本内容：

function rTent(x, y, w, h, fill, lbl) {
    // Rect / Square tent
    this.x = x || 0;
    this.y = y || 0;
    this.w = (w * 10) || 100;
    this.h = (h * 10) || 100;
    this.fc = fill || "rgba(255, 125, 125, 0.65)";
    this.lbl = lbl || "Tent";
    this.sqft = (w * h) || 100;
}

rTent.prototype.draw = function (ctx) {
    ctx.beginPath();
    ctx.fillStyle = this.fc;
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.strokeStyle = "#000";
    ctx.lineWidth = 1.5;
    ctx.strokeRect(this.x, this.y, this.w, this.h);
    console.log("Draw Rect Tent Completed, W:" + this.w + ", L:" + this.h + " (" + this.x + "," + this.y + ") Color: " + this.fc);

    ctx.textBaseLine = "top";
    ctx.textAlign = "center";
    ctx.font = "11px Verdana";
    ctx.fillStyle = "#000";
    ctx.fillText(
    this.lbl, (this.x + this.w / 2), (this.y + this.h / 2) - 14);
    ctx.fillText(
        "SQFT:" + (this.w / 10) * (this.h / 10), (this.x + this.w / 2), (this.y + this.h / 2)
    );
    ctx.closePath();
};

rTent.prototype.contains = function (mx, my) {
    return (this.x <= mx) && (this.x + this.w >= mx) && (this.y <= my) && (this.y + this.h >= my);
};

// skipping CanvasState definition - see jsFiddle ...

CanvasState.prototype.addShape = function (shape) {
    this.shapes.push(shape);
    this.valid = false;
};

CanvasState.prototype.clear = function () {
    this.ctx.clearRect(0, 0, this.width, this.height);
};

// While draw is called as often as the INTERVAL variable demands,
// It only ever does something if the canvas gets invalidated by our code
CanvasState.prototype.draw = function () {
    // if our state is invalid, redraw and validate!
    if (!this.valid) {
        var ctx = this.ctx;
        var shapes = this.shapes;
        this.clear();

        // ** Add stuff you want drawn in the background all the time here **
        // This is where GridLine are redrawn in the background
        this.drawGrid();

        // draw all shapes
        var l = shapes.length;
        for (var i = 0; i < l; i++) {
            var shape = shapes[i];
            // We can skip the drawing of elements that have moved off the screen:
            if (shape.x > this.width || shape.y > this.height || shape.x + shape.w < 0 || shape.y + shape.h < 0) continue;
            shapes[i].draw(ctx);
        }

        // draw selection
        // right now this is just a stroke along the edge of the selected Shape
        if (this.selection !== null) {
            ctx.beginPath();
            ctx.strokeStyle = this.selectionColor;
            ctx.lineWidth = this.selectionWidth;
            var mySel = this.selection;
            ctx.strokeRect(mySel.x, mySel.y, mySel.w, mySel.h);
        }

        // ** Add stuff you want drawn on top all the time here **

        this.valid = true;
    }
};

// More code skipped - see js Fiddle ...

CanvasState.prototype.drawGrid = function () {
    var gridOptions = {
        minorLines: {
            separation: 10,
            color: '#ddd'
        },
        majorLines: {
            separation: 100,
            color: '#ccc'
        },
        majorLabel: {
            font: 'Verdana',
            fontSize: '8px',
            fontColor: '#000'
        }
    };

    this.drawGridLines(gridOptions.minorLines, '');
    this.drawGridLines(gridOptions.majorLines, gridOptions.majorLabel);
};

CanvasState.prototype.drawGridLines = function (lineOptions, labelOptions) {
    var iWidth = this.width;
    var iHeight = this.height;

    var ctx = this.ctx;

    ctx.strokeStyle = lineOptions.color;
    ctx.strokeWidth = 1;

    ctx.beginPath();

    var iCount = null;
    var gc = 0;
    var gi = null;
    var gx = null;
    var gy = null;
    var labelOff = 10;

    iCount = Math.floor(iWidth / lineOptions.separation);
    if (typeof labelOptions !== 'string') {
        ctx.textBaseline = "top";
        ctx.textAlign = "center";
        ctx.font = labelOptions.fontSize + " " + labelOptions.font;
        ctx.fillText("0", 10, 2);
        gc = ((iWidth + 1) / 10);
        ctx.fillText(gc.toString(), iWidth - labelOff, 2);
    }

    for (gi = 1; gi <= iCount; gi += 1) {
        gx = (gi * lineOptions.separation);
        if (typeof labelOptions != 'string') {
            gc = gx / 10;
            ctx.fillText(gc.toString(), gx, 2);
        }
        ctx.beginPath()
        ctx.moveTo(0.5 + gx, labelOff);
        ctx.lineTo(0.5 + gx, iHeight - labelOff + 1);
        ctx.stroke();
    }

    iCount = Math.floor(iHeight / lineOptions.separation);

    if (typeof labelOptions !== 'string') {
        ctx.textBaseline = "middle";
        ctx.textAlign = "left";
        ctx.fillText("0", 2, 11);
        gc = ((iHeight + 1) / 10);
        ctx.fillText(gc.toString(), 0, iHeight - labelOff);
    }

    for (gi = 1; gi <= iCount; gi += 1) {
        gy = (gi * lineOptions.separation);
        if (typeof labelOptions != 'string') {
            gc = gy / 10;
            ctx.fillText(gc.toString(), 0, gy);
        }
        ctx.beginPath();
        ctx.moveTo(labelOff, 0.5 + gy);
        ctx.lineTo(iWidth - labelOff, 0.5 + gy);
        ctx.stroke();
    }

    ctx.closePath();
};

$(function () {
    var s = new CanvasState(document.getElementById('fpCanvas'));
    $("#add_tent_btn").click(function () {
        if ($("#tent_shape_choice").val() == "hex") {
            s.addShape(new hTent(
                120,
                120,
                $("#tent_w").val(),
                50,
                $("#tent_color_choice").val()
            ));
        } else {
            s.addShape(new rTent(
                120,
                120,
                $("#tent_w").val(),
                $("#tent_l").val(),
                $("#tent_color_choice").val()
            ));
        }
    });
});

功能rTent（x、y、w、h、填充、lbl）{
//矩形/方形帐篷
这个.x=x | | 0；
这个.y=y | | 0；
这个.w=（w*10）| | 100；
this.h=（h*10）| | 100；
this.fc=填充| |“rgba（255、125、125、0.65）”；
this.lbl=lbl | |帐篷；
this.sqft=（w*h）| | 100；
}
rTent.prototype.draw=函数（ctx）{
ctx.beginPath（）；
ctx.fillStyle=this.fc；
ctx.fillRect（this.x，this.y，this.w，this.h）；
ctx.strokeStyle=“#000”；
ctx.lineWidth=1.5；
ctx.strokeRect（this.x，this.y，this.w，this.h）；
log（“绘制完成的矩形帐篷，W:+this.W+”，L:+this.h+”（“+this.x+”，“+this.y+”）颜色：+this.fc）；
ctx.textb基线=“顶部”；
ctx.textAlign=“中心”；
ctx.font=“11px Verdana”；
ctx.fillStyle=“#000”；
ctx.fillText(
this.lbl，（this.x+this.w/2），（this.y+this.h/2）-14）；
ctx.fillText(
“SQFT:”+（this.w/10）*（this.h/10），（this.x+this.w/2），（this.y+this.h/2）
);
ctx.closePath（）；
};
rTent.prototype.contains=函数（mx，my）{
返回（this.x=mx）和&（this.y=my）；
};
//正在跳过CanvasState定义-请参阅JSFIDLE。。。
CanvasState.prototype.addShape=函数（形状）{
这个。形状。推（形状）；
this.valid=false；
};
CanvasState.prototype.clear=函数（）{
this.ctx.clearRect（0，0，this.width，this.height）；
};
//虽然draw与INTERVAL variable required一样经常调用，
//只有当画布被我们的代码失效时，它才会做一些事情
CanvasState.prototype.draw=函数（）{
//如果我们的状态无效，请重新绘制并验证！
如果（！this.valid）{
var ctx=this.ctx；
var shapes=this.shapes；
这个.clear（）；
//**在此处始终添加您想要在背景中绘制的内容**
//这是在背景中重新绘制网格线的地方
这个.drawGrid（）；
//画龙点睛
var l=形状。长度；
对于（变量i=0；ithis.width | | shape.y>this.height | | shape.x+shape.w<0 | | shape.y+shape.h<0）继续；
形状[i].绘制（ctx）；
}
//抽签选择
//现在，这只是沿选定形状边缘的笔划
if（this.selection！==null）{
ctx.beginPath（）；
ctx.strokeStyle=this.selectionColor；
ctx.lineWidth=this.selectionWidth；
var mySel=this.selection；
strokeRect（mySel.x，mySel.y，mySel.w，mySel.h）；
}
//**在此处始终添加您想要在顶部绘制的内容**
this.valid=true；
}
};
//跳过更多代码-请参阅js Fiddle。。。
CanvasState.prototype.drawGrid=函数（）{
变量gridOptions={
米诺林：{
分离：10，
颜色：'#ddd'
},
主要路线：{
分离：100，
颜色：“#ccc”
},
主标签：{
字体：“Verdana”，
fontSize:'8px'，
fontColor:“#000”
}
};
这是.drawGridLines（gridOptions.minorLines“”）；
这个.drawGridLines（gridOptions.majorLines，gridOptions.majorLabel）；
};
CanvasState.prototype.drawGridLines=函数（lineOptions，labelOptions）{
var iWidth=此.width；
var iHeight=此高度；
var ctx=this.ctx；
ctx.strokeStyle=lineOptions.color；
ctx.strokeWidth=1；
ctx.beginPath（）；
var-iCount=null；
var-gc=0；
var gi=null；
var gx=null；
var-gy=null；
var-labelOff=10；
iCount=Math.floor（iWidth/lineOptions.separation）；
如果（标签选项的类型！=='string'）{
ctx.textb基线=“顶部”；
ctx.textAlign=“中心”；
ctx.font=labelOptions.fontSize+“”+labelOptions.font；
ctx.fillText（“0”，10，2）；
gc=（（iWidth+1）/10）；
fillText（gc.toString（），iWidth-labelOff，2）；
}
对于（gi=1；gi您使用了两种不同的方法来设置线宽：
线宽和笔划宽度。通过在函数
CanvasState.prototype.drawGridLines
中添加一行，可以解决您的问题

下面是代码的快照：

CanvasState.prototype.drawGridLines = function (lineOptions, labelOptions) {
    var iWidth = this.width;
    var iHeight = this.height;

    var ctx = this.ctx;
    ctx.lineWidth = 1; //<-- the new line
    ctx.strokeStyle = lineOptions.color;
    ctx.strokeWidth = 1;
    //The rest of the code...

CanvasState.prototype.drawGridLines=函数（lineOptions，labelOptions）{
var iWidth=此.width；
var iHeight=此高度；
var ctx=this.ctx；
ctx.lineWidth=1；//捕捉得很好。strokeWidth可以删除，因为不存在具有该名称的属性。+1Spot on！自从我开始讨论这个问题以来，我没有读过任何内容。非常感谢！