Question

我有一段用createjs运行的代码。它使用虚线笔划将多边形绘制到画布上，并每次调整偏移量，使得虚线笔划看起来沿着路径移动。我在createjs中使用setStrokeDash()命令执行此操作。是否有任何等效命令在p5.js中执行相同的操作？ createjs中的工作代码如下：

<head>
    <script src="easeljs-0.8.2.min.js"></script>
    <script>
    var stage, polygon0 = false;
    var dashCmd;

    function init()
    {
         stage = new createjs.Stage("demoCanvas");          

         polygon0 = stage.addChild(new createjs.Shape());
         dashCmd = polygon0.graphics.setStrokeDash([7,3]).command;

         polygon0.graphics.beginStroke("black");
         polygon0.graphics.moveTo(508,564).lineTo(516,564).lineTo(775, 552).lineTo(508, 564);

         createjs.Ticker.timingMode = createjs.Ticker.RAF;

    }

    function tick(event)
    {
         dashCmd.offset++;
         stage.update(event);
    }
    </script>
</head>

<body onload="init();">
    <canvas id="demoCanvas" width="1200" height="1200"></canvas>
</body>

Answer 1

P5.JS 不包括它，但您仍然可以使用 javascript 语法来做到这一点： canvas.drawingContext.setLineDash([5, 5]);

P. S：你的画布必须是这样的全局变量：

let canvas;

function setup() {
  canvas = createCanvas();
}

Answer 2

据我所知，P5.js不包含此功能。您可以仔细阅读the P5.js reference。

您可能需要自己实现此功能。或者您可以查看p5.scribble等库。

在p5.js中绘制多边形的虚线描边

2 个答案: