pixi.js 绘制虚线

注意：虚线绘制比较耗费性能，如果是移动端项目，在一些手机上频繁绘制可能会有卡顿情况

注意2：generateCanvasTexture方法只有在 pixi-legacy.js （即pixi.js移动端适配版）才有，所以需要将pixi.js 文件替换成pixi-legacy.js   (这个是对应pixi v5的，需要最新版本的pixi 要自行到官网下载)

 

//虚线
  function drawDash(x0, y0, x1, y1, linewidth) {
    var dashed = new PIXI.Graphics();
    dashed.lineStyle({
      width:1,
      color:0xffffff,
      alpha:1,
      cap:'round',
    }); // linewidth,color,alpha
    dashed.moveTo(0, 0);
    dashed.lineTo(linewidth, 0);
    dashed.moveTo(linewidth * 1.5, 0);
    dashed.lineTo(linewidth * 2.5, 0);
    var dashedtexture = dashed.generateCanvasTexture(1, 1);
    var linelength = Math.pow(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2), .5);
    var tilingSprite = new PIXI.TilingSprite(dashedtexture, linelength, linewidth);
    tilingSprite.x = x0;
    tilingSprite.y = y0;
    tilingSprite.rotation = angle(x0, y0, x1, y1) * Math.PI / 180;
    tilingSprite.pivot.set(linewidth / 4, linewidth / 4);
    return tilingSprite;
    function angle(x0, y0, x1, y1) {
      var diff_x = Math.abs(x1 - x0),
      diff_y = Math.abs(y1 - y0);
      var cita;
      if (x1 > x0) {
        if (y1 > y0) {
          cita = 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
        } else {
          if (y1 < y0) {
            cita = -360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
          } else {
            cita = 0;
          }
        }
      } else {
        if (x1 < x0) {
          if (y1 > y0) {
            cita = 180 - 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
          } else {
            if (y1 < y0) {
              cita = 180 + 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
            } else {
              cita = 180;
            }
          }
        } else {
          if (y1 > y0) {
            cita = 90;
          } else {
            if (y1 < y0) {
              cita = -90;
            } else {
              cita = 0;
            }
          }
        }
      }
      return cita;
    }
  }

var dashSprite = drawDash(x0,y0,x1,y1,6)  //x0,y0是起点坐标，x1,y1是终点坐标，6 是线条宽度
stage.addChild(dashSprite)  //插入舞台或对应容器