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

  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[], {sxs, sys}: MultiPolygonsData): void {
    if (this.visuals.fill.doit || this.visuals.line.doit) {

      for (const i of indices) {
        ctx.beginPath()
        for (let j = 0, endj = sxs[i].length; j < endj; j++) {
          for (let k = 0, endk = sxs[i][j].length; k < endk; k++) {
            const _sx = sxs[i][j][k]
            const _sy = sys[i][j][k]

            for (let l = 0, endl = _sx.length; l < endl; l++) {
              if (l == 0) {
                ctx.moveTo(_sx[l], _sy[l])
                continue
              } else
                ctx.lineTo(_sx[l], _sy[l])
            }
            ctx.closePath()
          }
        }
        if (this.visuals.fill.doit) {
          this.visuals.fill.set_vectorize(ctx, i)
          ctx.fill("evenodd")
        }
        if (this.visuals.line.doit) {
          this.visuals.line.set_vectorize(ctx, i)
          ctx.stroke()
        }
      }
    }
  }

  _draw_legend_items(ctx: Context2d, bbox) {
    let yoffset;
    const { glyph_height } = this.model;
    const { glyph_width } = this.model;
    const { legend_padding } = this;
    const legend_spacing = this.model.spacing;
    const { label_standoff } = this.model;
    let xoffset = (yoffset = legend_padding);
    const vertical = this.model.orientation === "vertical";

    for (const item of this.model.items) {
      const labels = item.get_labels_list_from_label_prop();
      const field = item.get_field_from_label_prop();

      if (labels.length === 0) {
        continue;
      }

      const active = (() => { switch (this.model.click_policy) {
        case "none": return true;
        case "hide": return all(item.renderers, r => r.visible);
        case "mute": return all(item.renderers, r => !r.muted);
      } })();

      for (const label of labels) {
        const x1 = bbox.x + xoffset;
        const y1 = bbox.y + yoffset;
        const x2 = x1 + glyph_width;
        const y2 = y1 + glyph_height;
        if (vertical) {
          yoffset += this.max_label_height + legend_spacing;
        } else {
          xoffset += this.text_widths[label] + glyph_width + label_standoff + legend_spacing;
        }

        this.visuals.label_text.set_value(ctx);
        ctx.fillText(label, x2 + label_standoff, y1 + (this.max_label_height / 2.0));
        for (const r of item.renderers) {
          const view = this.plot_view.renderer_views[r.id];
          view.draw_legend(ctx, x1, x2, y1, y2, field, label);
        }

        if (!active) {
          let h: number
          let w: number
          if (vertical)
            [w, h] = [bbox.width-(2*legend_padding), this.max_label_height];
          else
            [w, h] = [this.text_widths[label] + glyph_width + label_standoff, this.max_label_height];

          ctx.beginPath();
          ctx.rect(x1, y1, w, h);
          this.visuals.inactive_fill.set_value(ctx);
          ctx.fill();
        }
      }
    }

    return null;
  }

  protected _render(ctx: Context2d, indices: number[], {sxs, sys}: MultiPolygonsData): void {
    if (this.visuals.fill.doit || this.visuals.line.doit) {

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

        if (this.visuals.fill.doit) {
          this.visuals.fill.set_vectorize(ctx, i)
          this._inner_loop(ctx, sx, sy)
          ctx.fill("evenodd")
        }

        this.visuals.hatch.doit2(ctx, i, () => {
          this._inner_loop(ctx, sx, sy)
          ctx.fill("evenodd")
        }, () => this.renderer.request_render())

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

  _v_canvas_text(ctx: Context2d, i, text, sx, sy, angle) {
    this.visuals.text.set_vectorize(ctx, i);
    const bbox_dims = this._calculate_bounding_box_dimensions(ctx, text);

    ctx.save();

    ctx.beginPath();
    ctx.translate(sx, sy);
    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_vectorize(ctx, i);
      ctx.fill();
    }

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

    if (this.visuals.text.doit) {
      this.visuals.text.set_vectorize(ctx, i);
      ctx.fillText(text, 0, 0);
    }

    return ctx.restore();
  }

  protected _render(ctx: Context2d, indices: number[],
                    {sleft, sright, stop, sbottom}: BoxData): void {
    for (const i of indices) {
      if (isNaN(sleft[i] + stop[i] + sright[i] + sbottom[i]))
        continue

      ctx.rect(sleft[i], stop[i], sright[i] - sleft[i], sbottom[i] - stop[i])

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i)
        ctx.beginPath()
        ctx.rect(sleft[i], stop[i], sright[i] - sleft[i], sbottom[i] - stop[i])
        ctx.fill()
      }

      this.visuals.hatch.doit2(ctx, i, () => {
        ctx.beginPath()
        ctx.rect(sleft[i], stop[i], sright[i] - sleft[i], sbottom[i] - stop[i])
        ctx.fill()
      }, () => this.renderer.request_render())

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i)
        ctx.beginPath()
        ctx.rect(sleft[i], stop[i], sright[i] - sleft[i], sbottom[i] - stop[i])
        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();
      }
    }
  }

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