Question

我在画布上画一把尺子。标尺用铬合金涂漆但不在IE或Edge中涂漆。标尺的刻度标记不是绘画。我认为我的问题在于设定中风。 IE不支持设定中风吗？

知道我做错了什么吗？

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

division.graphics.setStrokeStyle（0.5）.beginStroke（＆＃34;黑色＆＃34）;

backgroundOfDivision.graphics.drawRect（-pixelsPerDivision / 2,200，pixelsPerDivision，divisionHeight）.endStroke（）;

      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，就可以使用矩形。

希望有所帮助！

graphics.beginStroke在IE11或边缘

1 个答案: