TypeScript Context2d.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()
  }

  _render(ctx: Context2d, indices, {sx, sy, sx0, sy1, sw, sh, _angle}) {
    if (this.visuals.fill.doit) {
      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i])) {
          continue;
        }

        //no need to test the return value, we call fillRect for every glyph anyway
        this.visuals.fill.set_vectorize(ctx, i);

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i]);
          ctx.rotate(_angle[i]);
          ctx.fillRect(-sw[i]/2, -sh[i]/2, sw[i], sh[i]);
          ctx.rotate(-_angle[i]);
          ctx.translate(-sx[i], -sy[i]);
        } else {
          ctx.fillRect(sx0[i], sy1[i], sw[i], sh[i]);
        }
      }
    }

    if (this.visuals.line.doit) {
      ctx.beginPath();

      for (const i of indices) {

        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i])) {
          continue;
        }

        // fillRect does not fill zero-height or -width rects, but rect(...)
        // does seem to stroke them (1px wide or tall). Explicitly ignore rects
        // with zero width or height to be consistent
        if ((sw[i]===0) || (sh[i]===0)) {
          continue;
        }

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i]);
          ctx.rotate(_angle[i]);
          ctx.rect(-sw[i]/2, -sh[i]/2, sw[i], sh[i]);
          ctx.rotate(-_angle[i]);
          ctx.translate(-sx[i], -sy[i]);
        } else {
          ctx.rect(sx0[i], sy1[i], sw[i], sh[i]);
        }

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

      return ctx.stroke();
    }
  }

  _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()
      }
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sx, sy, sx0, sy1, sw, sh, _angle}: RectData): void {
    if (this.visuals.fill.doit) {
      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i]))
          continue

        //no need to test the return value, we call fillRect for every glyph anyway
        this.visuals.fill.set_vectorize(ctx, i)

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i])
          ctx.rotate(_angle[i])
          ctx.fillRect(-sw[i]/2, -sh[i]/2, sw[i], sh[i])
          ctx.rotate(-_angle[i])
          ctx.translate(-sx[i], -sy[i])
        } else
          ctx.fillRect(sx0[i], sy1[i], sw[i], sh[i])
      }
    }

    if (this.visuals.line.doit) {
      ctx.beginPath()

      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i]))
          continue

        // fillRect does not fill zero-height or -width rects, but rect(...)
        // does seem to stroke them (1px wide or tall). Explicitly ignore rects
        // with zero width or height to be consistent
        if (sw[i] == 0 || sh[i] == 0)
          continue

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i])
          ctx.rotate(_angle[i])
          ctx.rect(-sw[i]/2, -sh[i]/2, sw[i], sh[i])
          ctx.rotate(-_angle[i])
          ctx.translate(-sx[i], -sy[i])
        } else
          ctx.rect(sx0[i], sy1[i], sw[i], sh[i])

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

      ctx.stroke()
    }
  }

export function generic_area_legend(visuals: {line?: Line, fill: Fill, hatch?: Hatch}, ctx: Context2d, {x0, x1, y0, y1}: Area, index: number): void {
  const w = Math.abs(x1 - x0)
  const dw = w*0.1
  const h = Math.abs(y1 - y0)
  const dh = h*0.1

  const sx0 = x0 + dw
  const sx1 = x1 - dw

  const sy0 = y0 + dh
  const sy1 = y1 - dh

  if (visuals.fill.doit) {
    visuals.fill.set_vectorize(ctx, index)
    ctx.fillRect(sx0, sy0, sx1 - sx0, sy1 - sy0)
  }

  if (visuals.hatch != null && visuals.hatch.doit) {
    visuals.hatch.set_vectorize(ctx, index)
    ctx.fillRect(sx0, sy0, sx1 - sx0, sy1 - sy0)
  }

  if (visuals.line && visuals.line.doit) {
    ctx.beginPath()
    ctx.rect(sx0, sy0, sx1 - sx0, sy1 - sy0)
    visuals.line.set_vectorize(ctx, index)
    ctx.stroke()
  }
}

  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();
      }
    }
  }

  _render(ctx: Context2d, indices, {sx, sy, sw, sh}) {
    for (const i of indices) {
      if (isNaN(sx[i]+sy[i]+sw[i]+sh[i]+this._angle[i])) {
        continue;
      }

      ctx.translate(sx[i], sy[i]);
      ctx.rotate(this._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(-this._angle[i]);
      ctx.translate(-sx[i], -sy[i]);
    }
  }

  protected _canvas_text(ctx: Context2d, text: string, sx: number, sy: number, angle: number): void {
    this.visuals.text.set_value(ctx)
    const bbox_dims = this._calculate_bounding_box_dimensions(ctx, text)

    ctx.save()

    ctx.beginPath()
    ctx.translate(sx, sy)

    if (angle)
      ctx.rotate(angle)

    ctx.rect(bbox_dims[0], bbox_dims[1], bbox_dims[2], bbox_dims[3])

    if (this.visuals.background_fill.doit) {
      this.visuals.background_fill.set_value(ctx)
      ctx.fill()
    }

    if (this.visuals.border_line.doit) {
      this.visuals.border_line.set_value(ctx)
      ctx.stroke()
    }

    if (this.visuals.text.doit) {
      this.visuals.text.set_value(ctx)
      ctx.fillText(text, 0, 0)
    }

    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])
    }
  }