TypeScript Context2d.moveTo方法代码示例

  // this overrides the standard _paint_empty to make the inner canvas transparent
  protected _paint_empty(ctx: Context2d, frame_box: FrameBox): void {
    const ow = this.layout._width.value
    const oh = this.layout._height.value
    const [left, top, iw, ih] = frame_box

    ctx.clearRect(0, 0, ow, oh)

    ctx.beginPath()
    ctx.moveTo(0,  0)
    ctx.lineTo(0,  oh)
    ctx.lineTo(ow, oh)
    ctx.lineTo(ow, 0)
    ctx.lineTo(0,  0)

    ctx.moveTo(left,    top)
    ctx.lineTo(left+iw, top)
    ctx.lineTo(left+iw, top+ih)
    ctx.lineTo(left,    top+ih)
    ctx.lineTo(left,    top)
    ctx.closePath()

    if (this.model.border_fill_color != null) {
      ctx.fillStyle = this.model.border_fill_color
      ctx.fill()
    }
  }

  _render(ctx: Context2d, indices, {sxs, sys}) {
    // @sxss and @syss are used by _hit_point and sxc, syc
    // This is the earliest we can build them, and only build them once
    this.renderer.sxss = this._build_discontinuous_object(sxs);
    this.renderer.syss = this._build_discontinuous_object(sys);
    for (const i of indices) {
      const [sx, sy] = [sxs[i], sys[i]];

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i);

        for (let j = 0, end = sx.length; j < end; j++) {
          if (j === 0) {
            ctx.beginPath();
            ctx.moveTo(sx[j], sy[j]);
            continue;
          } else if (isNaN(sx[j] + sy[j])) {
            ctx.closePath();
            ctx.fill();
            ctx.beginPath();
            continue;
          } else {
            ctx.lineTo(sx[j], sy[j]);
          }
        }

        ctx.closePath();
        ctx.fill();
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i);

        for (let j = 0, end = sx.length; j < end; j++) {
          if (j === 0) {
            ctx.beginPath();
            ctx.moveTo(sx[j], sy[j]);
            continue;
          } else if (isNaN(sx[j] + sy[j])) {
            ctx.closePath();
            ctx.stroke();
            ctx.beginPath();
            continue;
          } else {
            ctx.lineTo(sx[j], sy[j]);
          }
        }

        ctx.closePath();
        ctx.stroke();
      }
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sxs, sys}: PatchesData): void {
    // this.sxss and this.syss are used by _hit_point and sxc, syc
    // This is the earliest we can build them, and only build them once
    this.sxss = this._build_discontinuous_object(sxs as any) // XXX
    this.syss = this._build_discontinuous_object(sys as any) // XXX

    for (const i of indices) {
      const [sx, sy] = [sxs[i], sys[i]]

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i)

        for (let j = 0, end = sx.length; j < end; j++) {
          if (j == 0) {
            ctx.beginPath()
            ctx.moveTo(sx[j], sy[j])
            continue
          } else if (isNaN(sx[j] + sy[j])) {
            ctx.closePath()
            ctx.fill()
            ctx.beginPath()
            continue
          } else
            ctx.lineTo(sx[j], sy[j])
        }

        ctx.closePath()
        ctx.fill()
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i)

        for (let j = 0, end = sx.length; j < end; j++) {
          if (j == 0) {
            ctx.beginPath()
            ctx.moveTo(sx[j], sy[j])
            continue
          } else if (isNaN(sx[j] + sy[j])) {
            ctx.closePath()
            ctx.stroke()
            ctx.beginPath()
            continue
          } else
            ctx.lineTo(sx[j], sy[j])
        }

        ctx.closePath()
        ctx.stroke()
      }
    }
  }

  _render(ctx: Context2d, indices: number[],
          {sx, sy, smodule, _angle, _teeth, _pressure_angle, _shaft_size, _internal}: GearData): void {
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + _angle[i] + smodule[i] + _teeth[i] + _pressure_angle[i] + _shaft_size[i]))
        continue

      const fn = _internal[i] ? internal_gear_tooth : gear_tooth
      const seq0 = fn(smodule[i], _teeth[i], _pressure_angle[i])
      const [, x, y, ...seq] = seq0

      ctx.save()
      ctx.translate(sx[i], sy[i])
      ctx.rotate(_angle[i])

      ctx.beginPath()

      const rot = 2*Math.PI/_teeth[i]
      ctx.moveTo(x as number, y as number)

      for (let j = 0; j < _teeth[i]; j++) {
        this._render_seq(ctx, seq)
        ctx.rotate(rot)
      }

      ctx.closePath()

      const pitch_radius = smodule[i]*_teeth[i]/2
      if (_internal[i]) {
        const rim_radius = pitch_radius + 2.75*smodule[i]
        ctx.moveTo(rim_radius, 0)
        ctx.arc(0, 0, rim_radius, 0, 2*Math.PI, true)
      } else if (_shaft_size[i] > 0) {
        const shaft_radius = pitch_radius*_shaft_size[i]
        ctx.moveTo(shaft_radius, 0)
        ctx.arc(0, 0, shaft_radius, 0, 2*Math.PI, true)
      }

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i)
        ctx.fill()
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i)
        ctx.stroke()
      }

      ctx.restore()
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sx, sy, sw, sh, _angle}: OvalData): void {
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + sw[i] + sh[i] + _angle[i]))
        continue

      ctx.translate(sx[i], sy[i])
      ctx.rotate(_angle[i])

      ctx.beginPath()
      ctx.moveTo(0, -sh[i]/2)
      ctx.bezierCurveTo( sw[i]/2, -sh[i]/2,  sw[i]/2,  sh[i]/2, 0,  sh[i]/2)
      ctx.bezierCurveTo(-sw[i]/2,  sh[i]/2, -sw[i]/2, -sh[i]/2, 0, -sh[i]/2)
      ctx.closePath()

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i)
        ctx.fill()
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i)
        ctx.stroke()
      }

      ctx.rotate(-_angle[i])
      ctx.translate(-sx[i], -sy[i])
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sx, sy, slength, _angle}: RayData): void {
    if (this.visuals.line.doit) {
      const width = this.renderer.plot_view.frame._width.value
      const height = this.renderer.plot_view.frame._height.value
      const inf_len = 2 * (width + height)

      for (let i = 0, end = slength.length; i < end; i++) {
        if (slength[i] == 0)
          slength[i] = inf_len
      }

      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + _angle[i] + slength[i]))
          continue

        ctx.translate(sx[i], sy[i])
        ctx.rotate(_angle[i])

        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(slength[i], 0)

        this.visuals.line.set_vectorize(ctx, i)
        ctx.stroke()

        ctx.rotate(-_angle[i])
        ctx.translate(-sx[i], -sy[i])
      }
    }
  }

  protected _render(ctx: Context2d, indices: number[],
                    {sx, sy, _start_angle, _angle, sinner_radius, souter_radius}: AnnularWedgeData): void {
    const direction = this.model.properties.direction.value();

    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + sinner_radius[i] + souter_radius[i] + _start_angle[i] + _angle[i]))
        continue;

      ctx.translate(sx[i], sy[i]);
      ctx.rotate(_start_angle[i]);

      ctx.moveTo(souter_radius[i], 0);
      ctx.beginPath();
      ctx.arc(0, 0, souter_radius[i], 0, _angle[i], direction);
      ctx.rotate(_angle[i]);
      ctx.lineTo(sinner_radius[i], 0);
      ctx.arc(0, 0, sinner_radius[i], 0, -_angle[i], !direction);
      ctx.closePath();

      ctx.rotate(-_angle[i]-_start_angle[i]);
      ctx.translate(-sx[i], -sy[i]);

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i);
        ctx.fill();
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i);
        ctx.stroke();
      }
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sx, sy}: LineData): void {
    let drawing = false
    let last_index: number | null = null

    this.visuals.line.set_value(ctx)
    for (const i of indices) {
      if (drawing) {
        if (!isFinite(sx[i] + sy[i])) {
          ctx.stroke()
          ctx.beginPath()
          drawing = false
          last_index = i
          continue
        }

        if (last_index != null && i - last_index > 1) {
          ctx.stroke()
          drawing = false
        }
      }

      if (drawing)
        ctx.lineTo(sx[i], sy[i])
      else {
        ctx.beginPath()
        ctx.moveTo(sx[i], sy[i])
        drawing = true
      }

      last_index = i
    }

    if (drawing)
      ctx.stroke()
  }

function _one_diamond(ctx: Context2d, r: number): void {
  ctx.moveTo(0, r)
  ctx.lineTo(r/1.5, 0)
  ctx.lineTo(0, -r)
  ctx.lineTo(-r/1.5, 0)
  ctx.closePath()
}

  _render(ctx: Context2d, indices, {sx, sy, slength, _angle}) {
    if (this.visuals.line.doit) {
      const width = this.renderer.plot_view.frame._width.value;
      const height = this.renderer.plot_view.frame._height.value;
      const inf_len = 2 * (width + height);

      for (let i = 0, end = slength.length; i < end; i++) {
        if (slength[i] === 0) {
          slength[i] = inf_len;
        }
      }

      for (const i of indices) {
        if (isNaN(sx[i]+sy[i]+_angle[i]+slength[i])) {
          continue;
        }

        ctx.translate(sx[i], sy[i]);
        ctx.rotate(_angle[i]);

        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(slength[i], 0);

        this.visuals.line.set_vectorize(ctx, i);
        ctx.stroke();

        ctx.rotate(-_angle[i]);
        ctx.translate(-sx[i], -sy[i]);
      }
    }
  }