graphics.beginStroke 在 IE11 或边缘中不起作用

Question

我正在画布上画一把尺子。标尺在 chrome 中绘制，但在 IE 或 Edge 中不绘制。 标尺的刻度线不是画的。我认为我的问题在于中风。 IE不支持设置笔画吗？

知道我做错了什么吗？

我认为问题出在这两行，但我不确定。

division.graphics.setStrokeStyle(0.5).beginStroke("black");

backgroundOfDivision.graphics.drawRect(-pixelsPerDivision / 2, 200, pixelPerDivision, divisionHeight).endStroke();

Link to the ruler game

      function createRuler(lengthInInches, start) {

        var ruler = new createjs.Container();

        var pixelsPerDivision = settings.ruler.pixelsPerDivision;

        var totalDivisions = settings.ruler.divisionsPerInch * (lengthInInches);

        var cmPerInch = 2.54;
        var mmPerInch = cmPerInch * 10;

        var rectangle = new createjs.Shape();
        var rulerHeight = 200;
        rectangle.graphics.beginStroke("black").beginFill("white").drawRect(0, 200, totalDivisions * pixelsPerDivision, rulerHeight);

        ruler.addChild(rectangle);

        var divisionContainer;
        var backgroundOfDivision;

        var division, divisionHeight, numberText;

        var end = start + totalDivisions;

        var startDivision = start * settings.ruler.divisionsPerInch;




        //Paint Standard Ruler
        for (var i = 0; i <= totalDivisions; ++i) {

            divisionContainer = new createjs.Container();
            divisionContainer.value = i * (1 / settings.ruler.divisionsPerInch) + start;
            divisionContainer.unit = "in";
            backgroundOfDivision = new createjs.Shape();

            division = new createjs.Shape();
            division.x = i * pixelsPerDivision
            division.graphics.setStrokeStyle(0.5).beginStroke("black");

            if ((i + startDivision) % 32 == 0) {
                // make big line
                divisionHeight = 70;

                if ((i + startDivision) > 0) {
                    var numberText = new createjs.Text(((i + startDivision) / 32).toString(), "32px Arial", "black");

                    numberText.x = division.x;
                    numberText.y = divisionHeight + 200;
                    numberText.textAlign = "center";

                    divisionContainer.addChild(numberText);
                }

            }
            else if ((i + startDivision) % 8 == 0) {
                // make 1/4 inch line
                divisionHeight = 60;
            }
            else if ((i + startDivision) % 4 == 0) {
                // make 1/8 inch line
                divisionHeight = 45;
            }
            else if ((i + startDivision) % 2 == 0) {
                // make 1/16 inch line
                divisionHeight = 30;
            }
            else {
                // make 1/32 inch line
                divisionHeight = 15;

            }
            backgroundOfDivision.graphics.setStrokeStyle(0.5).beginStroke("Green").beginFill("Green");
            backgroundOfDivision.alpha = 0.0;
            backgroundOfDivision.graphics.drawRect(-pixelsPerDivision / 2, 200, pixelsPerDivision, divisionHeight).endStroke();
            backgroundOfDivision.x = i * pixelsPerDivision;

            division.graphics.drawRect(0, 200, 0, divisionHeight).endStroke();
            divisionContainer.divisionHeight = divisionHeight;
            divisionContainer.division = division;
            divisionContainer.backgroundOfDivision = backgroundOfDivision;

            divisionContainer.addChild(backgroundOfDivision);
            divisionContainer.addEventListener("rollover", function (e) {

                createjs.Tween.get(e.currentTarget.backgroundOfDivision).to({ alpha: 1.0 }, 500);
            });
            divisionContainer.addEventListener("rollout", function (e) {

                createjs.Tween.get(e.currentTarget.backgroundOfDivision, { override: true }).to({ alpha: 0.0 }, 250);
            });
            divisionContainer.addEventListener("mousedown", function (e) {
                if (clickedAnswerNowWait == false) {
                    btnClick();
                    clickedAnswerNowWait = true;
                    CheckAnswer(e.currentTarget)
                }
            });

            divisionContainer.addChild(division);
            ruler.addChild(divisionContainer);
            allTheDivisions.push(divisionContainer);
        }
}

Answer 1

这里的问题不在于 EaselJS beginStroke，而在于浏览器如何处理 0 宽度的矩形。

要在标尺上绘制刻度，您使用的是：

division.graphics.beginStroke("green")
  .drawRect(0, 200, 0, divisionHeight);

在 Chrome 中，这将显示笔划，但 IE/Edge 不会。为了说明这一点，我created a simple demo 只是在原始画布上进行了描边：

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,0,100);
ctx.stroke();

在 Chrome 中，这会显示笔画，而 IE/Edge 则不会。

我建议改为使用笔画。它具有随着笔划增长自动居中的好处，您也可以控制 lineCap。如果您想要具有不同填充/描边的刻度，那么矩形是可行的方法，只要它们的宽度大于 0。

希望有帮助！