TypeScript Context2d.fillText方法代码示例

  _render(ctx: Context2d, indices, {sx, sy, _x_offset, _y_offset, _angle, _text}) {
    for (const i of indices) {
      if (isNaN(sx[i]+sy[i]+_x_offset[i]+_y_offset[i]+_angle[i]) || (_text[i] == null)) {
        continue;
      }

      if (this.visuals.text.doit) {
        const text = `${_text[i]}`;

        ctx.save();
        ctx.translate(sx[i] + _x_offset[i], sy[i] + _y_offset[i]);
        ctx.rotate(_angle[i]);
        this.visuals.text.set_vectorize(ctx, i);

        if (text.indexOf("\n") === -1) {
          ctx.fillText(text, 0, 0);
        } else {
          const lines = text.split("\n");

          const font = this.visuals.text.cache_select("font", i);
          const {height} = get_text_height(font);
          const line_height = this.visuals.text.text_line_height.value()*height;
          const block_height = line_height*lines.length;

          const baseline = this.visuals.text.cache_select("text_baseline", i);
          let y;
          switch (baseline) {
            case "top": {
              y = 0;
              break;
            }
            case "middle": {
              y = (-block_height/2) + (line_height/2);
              break;
            }
            case "bottom": {
              y = -block_height + line_height;
              break;
            }
            default: {
              y = 0;
              console.warn(`'${baseline}' baseline not supported with multi line text`);
            }
          }

          for (const line of lines) {
            ctx.fillText(line, 0, y);
            y += line_height;
          }
        }

        ctx.restore();
      }
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sx, sy, _x_offset, _y_offset, _angle, _text}: TextData): void {
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + _x_offset[i] + _y_offset[i] + _angle[i]) || _text[i] == null)
        continue

      if (this.visuals.text.doit) {
        const text = `${_text[i]}`

        ctx.save()
        ctx.translate(sx[i] + _x_offset[i], sy[i] + _y_offset[i])
        ctx.rotate(_angle[i])
        this.visuals.text.set_vectorize(ctx, i)

        if (text.indexOf("\n") == -1)
          ctx.fillText(text, 0, 0)
        else {
          const lines = text.split("\n")

          const font = this.visuals.text.cache_select("font", i)
          const {height} = get_text_height(font)
          const line_height = this.visuals.text.text_line_height.value()*height
          const block_height = line_height*lines.length

          const baseline = this.visuals.text.cache_select("text_baseline", i)
          let y: number
          switch (baseline) {
            case "top": {
              y = 0
              break
            }
            case "middle": {
              y = (-block_height/2) + (line_height/2)
              break
            }
            case "bottom": {
              y = -block_height + line_height
              break
            }
            default: {
              y = 0
              console.warn(`'${baseline}' baseline not supported with multi line text`)
            }
          }

          for (const line of lines) {
            ctx.fillText(line, 0, y)
            y += line_height
          }
        }

        ctx.restore()
      }
    }
  }

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

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

  _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;
  }

  _draw_major_labels(ctx: Context2d, tick_info) {
    if (!this.visuals.major_label_text.doit) {
      return;
    }

    const [nx, ny] = this.model._normals();
    const image = this.model._computed_image_dimensions();
    const [x_offset, y_offset] = [image.width * nx, image.height * ny];
    const standoff = (this.model.label_standoff + this.model._tick_extent());
    const [x_standoff, y_standoff] = [standoff*nx, standoff*ny];

    const [sx, sy] = tick_info.coords.major;

    const formatted_labels = tick_info.labels.major;

    this.visuals.major_label_text.set_value(ctx);

    ctx.save();
    ctx.translate(x_offset + x_standoff, y_offset + y_standoff);
    for (let i = 0, end = sx.length; i < end; i++) {
      ctx.fillText(formatted_labels[i],
                   Math.round(sx[i]+(nx*this.model.label_standoff)),
                   Math.round(sy[i]+(ny*this.model.label_standoff)));
    }
    return ctx.restore();
  }

  protected _draw_title(ctx: Context2d): void {
    if (!this.visuals.title_text.doit)
      return

    ctx.save()
    this.visuals.title_text.set_value(ctx)
    ctx.fillText(this.model.title, 0, -this.model.title_standoff)
    ctx.restore()
  }

  protected _draw_title(ctx: Context2d, bbox: BBox): void {
    if (!this.visuals.title_text.doit)
      return

    ctx.save()
    ctx.translate(bbox.x0, bbox.y0 + this.title_height)
    this.visuals.title_text.set_value(ctx)
    ctx.fillText(this.model.title, this.legend_padding, this.legend_padding-this.model.title_standoff)
    ctx.restore()
  }

  _draw_title(ctx: Context2d) {
    if (!this.visuals.title_text.doit) {
      return;
    }

    ctx.save();
    this.visuals.title_text.set_value(ctx);
    ctx.fillText(this.model.title, 0, -this.model.title_standoff);
    return ctx.restore();
  }

  protected _draw_legend_items(ctx: Context2d, bbox: BBox): void {
    const {glyph_width, glyph_height} = this.model
    const {legend_padding} = this
    const legend_spacing = this.model.spacing
    const {label_standoff} = this.model
    let xoffset = legend_padding
    let 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 every(item.renderers, r => r.visible)
        case "mute": return every(item.renderers, r => !r.muted)
      } })()

      for (const label of labels) {
        const x1 = bbox.x + xoffset
        const y1 = bbox.y + yoffset + this.title_height
        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] as GlyphRendererView
          view.draw_legend(ctx, x1, x2, y1, y2, field, label, item.index)
        }

        if (!active) {
          let w: number, h: 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()
        }
      }
    }
  }