TypeScript datagrid.GraphicsContext类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@phosphor/datagrid.GraphicsContext类的典型用法代码示例。如果您正苦于以下问题：TypeScript GraphicsContext类的具体用法？TypeScript GraphicsContext怎么用？TypeScript GraphicsContext使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

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

示例1: drawImage

  drawImage(gc: GraphicsContext, config: CellRenderer.ICellConfig): void {
    if (!config.value) {
      return;
    }

    const img = new Image();
    const dpiRatio =  this.dataGrid['_dpiRatio'];
    const x = config.x * dpiRatio;
    const y = config.y * dpiRatio;
    const width = config.width * dpiRatio;
    const height = config.height * dpiRatio;

    gc.setTransform(1, 0, 0, 1, 0, 0);
    gc.beginPath();
    gc.rect(x, y, width, height - 1);
    gc.clip();

    img.src = this.prepareImageSrc(config);

    if (!img.complete) {
      img.onload = () => {
        this.dataGrid.repaint(x, y, img.width, img.height);
      }
    } else {
      this.resizeCell({ ...config }, img.width, img.height);

      gc.drawImage(img, x, y);
    }
  }

开发者ID:twosigma，项目名称:beaker-notebook，代码行数:29，代码来源:ImageCellRenderer.ts

示例2: drawTextUnderline

  drawTextUnderline(gc: GraphicsContext, textConfig, config) {
    let { text, textX, textY, color } = textConfig;
    let url = retrieveUrl(text);

    if (!url) {
      return;
    }

    let underlineEndX: number;
    let underlineStartX: number;
    let urlIndex = text.indexOf(url);
    let firstPart = urlIndex > 0 ? text.slice(0, urlIndex) : '';
    let fontSize = selectDataFontSize(this.store.state);
    let textWidth: number = getStringSize(text, fontSize).width - TEXT_WIDTH_OFFSET;
    let firstPartWidth = getStringSize(firstPart, fontSize).width - TEXT_WIDTH_OFFSET;
    let hAlign = CellRenderer.resolveOption(this.horizontalAlignment, config);

    // Compute the X position for the underline.
    switch (hAlign) {
      case 'left':
        underlineEndX = Math.round(textX + textWidth);
        underlineStartX = Math.round(textX + firstPartWidth);
        break;
      case 'center':
        textX = config.x + config.width / 2 - textWidth / 2;
        underlineEndX = Math.round(textX + textWidth);
        underlineStartX = textX + firstPartWidth;
        break;
      case 'right':
        underlineEndX = Math.round(textX - textWidth + firstPartWidth);
        underlineStartX = textX;
        break;
      default:
        throw 'unreachable';
    }

    gc.beginPath();
    gc.moveTo(underlineStartX, textY - 0.5);
    gc.lineTo(underlineEndX, textY - 0.5);
    gc.strokeStyle = color;
    gc.lineWidth = 1.0;
    gc.stroke();
  }

开发者ID:twosigma，项目名称:beaker-notebook，代码行数:43，代码来源:BeakerXCellRenderer.ts

示例3: drawBackground

  drawBackground(gc: GraphicsContext, config: CellRenderer.ICellConfig): void {
    let color = CellRenderer.resolveOption(this.backgroundColor, config);

    if (!color) {
      return;
    }

    gc.fillStyle = color;
    gc.fillRect(config.x, config.y, config.width, config.height);
  }

开发者ID:twosigma，项目名称:beaker-notebook，代码行数:10，代码来源:ImageCellRenderer.ts

示例4: drawText

  drawText(gc: GraphicsContext, config: CellRenderer.ICellConfig): void {
    const options = this.getOptions(config);
    const renderer = this.getRenderer(config);

    if (
      !options.font
      || !options.color
      || options.boxHeight <= 0
      || options.text === null
      || (renderer
      && renderer.type === RENDERER_TYPE.DataBars
      && !renderer.includeText)
    ) {
      return;
    }

    const { textX, textY } = this.getTextPosition(config, options);

    // Clip the cell if the text is taller than the text box height.
    if (options.textHeight > options.boxHeight) {
      gc.beginPath();
      gc.rect(config.x, config.y, config.width, config.height - 1);
      gc.clip();
    }

    // Set the gc state.
    gc.textBaseline = 'bottom';
    gc.textAlign = options.hAlign;
    gc.font = options.font;
    gc.fillStyle = options.color;

    if (DataGridCell.isCellHovered(this.dataGrid.cellManager.hoveredCellData, config)) {
      this.drawTextUnderline(gc, { text: options.text, textX, textY, color: options.color }, config);
    }

    gc.fillText(options.text, textX, textY);
  }

开发者ID:twosigma，项目名称:beaker-notebook，代码行数:37，代码来源:DefaultCellRenderer.ts

示例5: drawBackground

  drawBackground(gc: GraphicsContext, config: CellRenderer.ICellConfig) {
    super.drawBackground(gc, config);

    const renderer = this.getRenderer(config);
    const isHeaderCell = DataGridCell.isHeaderCell(config);

    if (renderer && renderer.type === RENDERER_TYPE.DataBars && !isHeaderCell) {
      const barWidth = config.width/2 * renderer.percent;

      gc.fillStyle = BeakerXThemeHelper.DEFAULT_HIGHLIGHT_COLOR;
      gc.fillRect(
        config.x + config.width/2 - (renderer.direction === 'RIGHT' ? 0 : barWidth),
        config.y,
        barWidth,
        config.height - 1
      );
    }
  }

开发者ID:twosigma，项目名称:beaker-notebook，代码行数:18，代码来源:BeakerXCellRenderer.ts

示例6: drawText

  drawText(gc: GraphicsContext, config: CellRenderer.ICellConfig): void {
    const options = this.getOptions(config);

    if (
      !options.font
      || !options.color
      || options.boxHeight <= 0
      || options.text === null
    ) {
      return;
    }

    // Set up the text position variables.
    let { textX, textY } = this.getTextPosition(config, options, true);

    // Clip the cell if the text is taller than the text box height.
    if (options.textHeight > options.boxHeight) {
      gc.beginPath();
      gc.rect(config.x, config.y, config.width, config.height - 1);
      gc.clip();
    }

    let verticalHeader = selectHeadersVertical(this.store.state);

    // Set the gc state.
    gc.textBaseline = 'bottom';
    gc.textAlign = options.hAlign;

    if(verticalHeader) {
      gc.save();
      gc.rotate(-Math.PI/2);

      textX = -config.height + 2;
      textY = config.x + config.width - 3;
      gc.textBaseline = 'bottom';
      gc.textAlign = 'left';
    }

    gc.font = options.font;
    gc.fillStyle = options.color;

    // Draw the text for the cell.
    gc.fillText(options.text, textX, textY);
    verticalHeader && gc.restore();
  }

开发者ID:twosigma，项目名称:beaker-notebook，代码行数:45，代码来源:HeaderCellRenderer.ts

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