TypeScript text.get_text_height函数代码示例

  protected _get_label_extent(): number {
    const major_labels = this.model.tick_info().labels.major

    let label_extent: number
    if (this.model.color_mapper.low != null && this.model.color_mapper.high != null && !isEmpty(major_labels)) {
      const {ctx} = this.plot_view.canvas_view
      ctx.save()
      this.visuals.major_label_text.set_value(ctx)
      switch (this.model.orientation) {
        case "vertical":
          label_extent = max((major_labels.map((label) => ctx.measureText(label.toString()).width)))
          break
        case "horizontal":
          label_extent = text_util.get_text_height(this.visuals.major_label_text.font_value()).height
          break
        default:
          throw new Error("unreachable code")
      }

      label_extent += this.model.label_standoff
      ctx.restore()
    } else
      label_extent = 0

    return label_extent
  }

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

  _get_label_extent() {
    let label_extent;
    const major_labels = this.model.tick_info().labels.major;
    if ((this.model.color_mapper.low != null) && (this.model.color_mapper.high != null) && !isEmpty(major_labels)) {
      const { ctx } = this.plot_view.canvas_view;
      ctx.save();
      this.visuals.major_label_text.set_value(ctx);
      switch (this.model.orientation) {
        case "vertical":
          label_extent = max((major_labels.map((label) => ctx.measureText(label.toString()).width)));
          break;
        case "horizontal":
          label_extent = text_util.get_text_height(this.visuals.major_label_text.font_value()).height;
          break;
      }

      label_extent += this.model.label_standoff;
      ctx.restore();
    } else {
      label_extent = 0;
    }
    return label_extent;
  }

 protected _calculate_text_dimensions(ctx: Context2d, text: string): [number, number] {
   const {width} = ctx.measureText(text)
   const {height} = get_text_height(this.visuals.text.font_value())
   return [width, height]
 }

  compute_legend_bbox(): LegendBBox {
    const legend_names = this.model.get_legend_names()

    const {glyph_height, glyph_width} = this.model
    const {label_height, label_width} = this.model

    this.max_label_height = max(
      [get_text_height(this.visuals.label_text.font_value()).height, label_height, glyph_height],
    )

    // this is to measure text properties
    const { ctx } = this.plot_view.canvas_view
    ctx.save()
    this.visuals.label_text.set_value(ctx)
    this.text_widths = {}
    for (const name of legend_names) {
      this.text_widths[name] = max([ctx.measureText(name).width, label_width])
    }
    ctx.restore()

    const max_label_width = Math.max(max(values(this.text_widths)), 0)

    const legend_margin = this.model.margin
    const {legend_padding} = this
    const legend_spacing = this.model.spacing
    const {label_standoff} =  this.model

    let legend_height: number, legend_width: number
    if (this.model.orientation == "vertical") {
      legend_height = legend_names.length*this.max_label_height + Math.max(legend_names.length - 1, 0)*legend_spacing + 2*legend_padding
      legend_width = max_label_width + glyph_width + label_standoff + 2*legend_padding
    } else {
      legend_width = 2*legend_padding + Math.max(legend_names.length - 1, 0)*legend_spacing
      for (const name in this.text_widths) {
        const width = this.text_widths[name]
        legend_width += max([width, label_width]) + glyph_width + label_standoff
      }
      legend_height = this.max_label_height + 2*legend_padding
    }

    const panel = this.model.panel != null ? this.model.panel : this.plot_view.frame
    const [hr, vr] = panel.bbox.ranges

    const {location} = this.model
    let sx: number, sy: number
    if (isString(location)) {
      switch (location) {
        case 'top_left':
          sx = hr.start + legend_margin
          sy = vr.start + legend_margin
          break
        case 'top_center':
          sx = (hr.end + hr.start)/2 - legend_width/2
          sy = vr.start + legend_margin
          break
        case 'top_right':
          sx = hr.end - legend_margin - legend_width
          sy = vr.start + legend_margin
          break
        case 'bottom_right':
          sx = hr.end - legend_margin - legend_width
          sy = vr.end - legend_margin - legend_height
          break
        case 'bottom_center':
          sx = (hr.end + hr.start)/2 - legend_width/2
          sy = vr.end - legend_margin - legend_height
          break
        case 'bottom_left':
          sx = hr.start + legend_margin
          sy = vr.end - legend_margin - legend_height
          break
        case 'center_left':
          sx = hr.start + legend_margin
          sy = (vr.end + vr.start)/2 - legend_height/2
          break
        case 'center':
          sx = (hr.end + hr.start)/2 - legend_width/2
          sy = (vr.end + vr.start)/2 - legend_height/2
          break
        case 'center_right':
          sx = hr.end - legend_margin - legend_width
          sy = (vr.end + vr.start)/2 - legend_height/2
          break
        default:
          throw new Error("unreachable code")
      }
    } else if (isArray(location) && location.length == 2) {
      const [vx, vy] = location
      sx = panel.xview.compute(vx)
      sy = panel.yview.compute(vy) - legend_height
    } else
      throw new Error("unreachable code")

    return {x: sx, y: sy, width: legend_width, height: legend_height}
  }

  compute_legend_bbox() {
    const legend_names = this.model.get_legend_names();

    const {glyph_height, glyph_width} = this.model;
    const {label_height, label_width} = this.model;

    this.max_label_height = max(
      [get_text_height(this.visuals.label_text.font_value()).height, label_height, glyph_height],
    );

    // this is to measure text properties
    const { ctx } = this.plot_view.canvas_view;
    ctx.save();
    this.visuals.label_text.set_value(ctx);
    this.text_widths = {};
    for (const name of legend_names) {
      this.text_widths[name] = max([ctx.measureText(name).width, label_width]);
    }
    ctx.restore();

    const max_label_width = Math.max(max(values(this.text_widths)), 0);

    const legend_margin = this.model.margin;
    const { legend_padding } = this;
    const legend_spacing = this.model.spacing;
    const { label_standoff } =  this.model;

    let legend_height, legend_width
    if (this.model.orientation === "vertical") {
      legend_height = (legend_names.length * this.max_label_height) + (Math.max(legend_names.length - 1, 0) * legend_spacing) + (2 * legend_padding);
      legend_width = max_label_width + glyph_width + label_standoff + (2 * legend_padding);
    } else {
      legend_width = (2 * legend_padding) + (Math.max(legend_names.length - 1, 0) * legend_spacing);
      for (const name in this.text_widths) {
        const width = this.text_widths[name];
        legend_width += max([width, label_width]) + glyph_width + label_standoff;
      }
      legend_height = this.max_label_height + (2 * legend_padding);
    }

    const panel = this.model.panel != null ? this.model.panel : this.plot_view.frame;
    const [hr, vr] = panel.bbox.ranges;

    const { location } = this.model;
    let sx, sy
    if (isString(location)) {
      switch (location) {
        case 'top_left':
          sx = hr.start + legend_margin;
          sy = vr.start + legend_margin;
          break;
        case 'top_center':
          sx = ((hr.end + hr.start)/2) - (legend_width/2);
          sy = vr.start + legend_margin;
          break;
        case 'top_right':
          sx = hr.end - legend_margin - legend_width;
          sy = vr.start + legend_margin;
          break;
        case 'bottom_right':
          sx = hr.end - legend_margin - legend_width;
          sy = vr.end - legend_margin - legend_height;
          break;
        case 'bottom_center':
          sx = ((hr.end + hr.start)/2) - (legend_width/2);
          sy = vr.end - legend_margin - legend_height;
          break;
        case 'bottom_left':
          sx = hr.start + legend_margin;
          sy = vr.end - legend_margin - legend_height;
          break;
        case 'center_left':
          sx = hr.start + legend_margin;
          sy = ((vr.end + vr.start)/2) - (legend_height/2);
          break;
        case 'center':
          sx = ((hr.end + hr.start)/2) - (legend_width/2);
          sy = ((vr.end + vr.start)/2) - (legend_height/2);
          break;
        case 'center_right':
          sx = hr.end - legend_margin - legend_width;
          sy = ((vr.end + vr.start)/2) - (legend_height/2);
          break;
      }
    } else if (isArray(location) && (location.length === 2)) {
      const [vx, vy] = location;
      sx = panel.xview.compute(vx);
      sy = panel.yview.compute(vy) - legend_height;
    }

    return {x: sx, y: sy, width: legend_width, height: legend_height};
  }

 _title_extent() {
   const font_value = this.title_text_font + " " + this.title_text_font_size + " " + this.title_text_font_style;
   const title_extent = this.title ? text_util.get_text_height(font_value).height + this.title_standoff : 0;
   return title_extent;
 }

 _calculate_text_dimensions(ctx: Context2d, text) {
   const { width } = ctx.measureText(text);
   const { height } = get_text_height(this.visuals.text.font_value());
   return [width, height];
 }