当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript Context2d.measureText方法代码示例

本文整理汇总了TypeScript中core/util/canvas.Context2d.measureText方法的典型用法代码示例。如果您正苦于以下问题:TypeScript Context2d.measureText方法的具体用法?TypeScript Context2d.measureText怎么用?TypeScript Context2d.measureText使用的例子?那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在core/util/canvas.Context2d的用法示例。


在下文中一共展示了Context2d.measureText方法的3个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: _render

  protected _render(ctx: Context2d, indices: number[], {sx, sy, _x_offset, _y_offset, _angle, _text}: TextData): void {
    this._sys = []
    this._sxs = []
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + _x_offset[i] + _y_offset[i] + _angle[i]) || _text[i] == null)
        continue
      this._sxs[i] = []
      this._sys[i] = []
      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)

        const font = this.visuals.text.cache_select("font", i)
        const {height} = measure_font(font)
        const line_height = this.visuals.text.text_line_height.value()*height
        if (text.indexOf("\n") == -1){
          ctx.fillText(text, 0, 0)
          const x0 = sx[i] + _x_offset[i]
          const y0 = sy[i] + _y_offset[i]
          const width = ctx.measureText(text).width
          const [xvalues, yvalues] = this._text_bounds(x0, y0, width, line_height)
          this._sxs[i].push(xvalues)
          this._sys[i].push(yvalues)
        } else {
          const lines = text.split("\n")
          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)

            const x0 = sx[i] + _x_offset[i]
            const y0 = y + sy[i] + _y_offset[i]
            const width = ctx.measureText(line).width
            const [xvalues, yvalues] = this._text_bounds(x0, y0, width, line_height)
            this._sxs[i].push(xvalues)
            this._sys[i].push(yvalues)

            y += line_height
          }
        }

        ctx.restore()
      }
    }
  }
开发者ID:digitalsatori,项目名称:Bokeh,代码行数:70,代码来源:text.ts

示例2: _calculate_text_dimensions

 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]
 }
开发者ID:Zyell,项目名称:bokeh,代码行数:5,代码来源:text_annotation.ts

示例3: _calculate_text_dimensions

 _calculate_text_dimensions(ctx: Context2d, text) {
   const { width } = ctx.measureText(text);
   const { height } = get_text_height(this.visuals.text.font_value());
   return [width, height];
 }
开发者ID:FourtekIT-incubator,项目名称:bokeh,代码行数:5,代码来源:text_annotation.ts


注:本文中的core/util/canvas.Context2d.measureText方法示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。