TypeScript Context2d.rect方法代码示例

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

    }
  }

  _render(ctx: Context2d, indices, {sx, sy, sx0, sy1, sw, sh, _angle}) {
    if (this.visuals.fill.doit) {
      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i])) {
          continue;
        }

        //no need to test the return value, we call fillRect for every glyph anyway
        this.visuals.fill.set_vectorize(ctx, i);

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i]);
          ctx.rotate(_angle[i]);
          ctx.fillRect(-sw[i]/2, -sh[i]/2, sw[i], sh[i]);
          ctx.rotate(-_angle[i]);
          ctx.translate(-sx[i], -sy[i]);
        } else {
          ctx.fillRect(sx0[i], sy1[i], sw[i], sh[i]);
        }
      }
    }

    if (this.visuals.line.doit) {
      ctx.beginPath();

      for (const i of indices) {

        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i])) {
          continue;
        }

        // fillRect does not fill zero-height or -width rects, but rect(...)
        // does seem to stroke them (1px wide or tall). Explicitly ignore rects
        // with zero width or height to be consistent
        if ((sw[i]===0) || (sh[i]===0)) {
          continue;
        }

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i]);
          ctx.rotate(_angle[i]);
          ctx.rect(-sw[i]/2, -sh[i]/2, sw[i], sh[i]);
          ctx.rotate(-_angle[i]);
          ctx.translate(-sx[i], -sy[i]);
        } else {
          ctx.rect(sx0[i], sy1[i], sw[i], sh[i]);
        }

        this.visuals.line.set_vectorize(ctx, i);
        ctx.stroke();
        ctx.beginPath();
      }

      return ctx.stroke();
    }
  }

  protected _render(ctx: Context2d, indices: number[], {sx, sy, sx0, sy1, sw, sh, _angle}: RectData): void {
    if (this.visuals.fill.doit) {
      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i]))
          continue

        //no need to test the return value, we call fillRect for every glyph anyway
        this.visuals.fill.set_vectorize(ctx, i)

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i])
          ctx.rotate(_angle[i])
          ctx.fillRect(-sw[i]/2, -sh[i]/2, sw[i], sh[i])
          ctx.rotate(-_angle[i])
          ctx.translate(-sx[i], -sy[i])
        } else
          ctx.fillRect(sx0[i], sy1[i], sw[i], sh[i])
      }
    }

    if (this.visuals.line.doit) {
      ctx.beginPath()

      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sx0[i] + sy1[i] + sw[i] + sh[i] + _angle[i]))
          continue

        // fillRect does not fill zero-height or -width rects, but rect(...)
        // does seem to stroke them (1px wide or tall). Explicitly ignore rects
        // with zero width or height to be consistent
        if (sw[i] == 0 || sh[i] == 0)
          continue

        if (_angle[i]) {
          ctx.translate(sx[i], sy[i])
          ctx.rotate(_angle[i])
          ctx.rect(-sw[i]/2, -sh[i]/2, sw[i], sh[i])
          ctx.rotate(-_angle[i])
          ctx.translate(-sx[i], -sy[i])
        } else
          ctx.rect(sx0[i], sy1[i], sw[i], sh[i])

        this.visuals.line.set_vectorize(ctx, i)
        ctx.stroke()
        ctx.beginPath()
      }

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

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

export function generic_area_legend(visuals: {line?: Line, fill: Fill, hatch?: Hatch}, ctx: Context2d, {x0, x1, y0, y1}: Area, index: number): void {
  const w = Math.abs(x1 - x0)
  const dw = w*0.1
  const h = Math.abs(y1 - y0)
  const dh = h*0.1

  const sx0 = x0 + dw
  const sx1 = x1 - dw

  const sy0 = y0 + dh
  const sy1 = y1 - dh

  if (visuals.fill.doit) {
    visuals.fill.set_vectorize(ctx, index)
    ctx.fillRect(sx0, sy0, sx1 - sx0, sy1 - sy0)
  }

  if (visuals.hatch != null && visuals.hatch.doit) {
    visuals.hatch.set_vectorize(ctx, index)
    ctx.fillRect(sx0, sy0, sx1 - sx0, sy1 - sy0)
  }

  if (visuals.line && visuals.line.doit) {
    ctx.beginPath()
    ctx.rect(sx0, sy0, sx1 - sx0, sy1 - sy0)
    visuals.line.set_vectorize(ctx, index)
    ctx.stroke()
  }
}

  _render(ctx: Context2d, indices, {_url, image, sx, sy, sw, sh, _angle}) {

    // TODO (bev): take actual border width into account when clipping
    const { frame } = this.renderer.plot_view;
    ctx.rect(
      frame._left.value+1, frame._top.value+1,
      frame._width.value-2, frame._height.value-2,
    );
    ctx.clip();

    let finished = true;

    for (const i of indices) {
      if (isNaN(sx[i]+sy[i]+_angle[i])) {
        continue;
      }

      if (this.retries[i] === -1) {
        continue;
      }

      if ((image[i] == null)) {
        finished = false;
        continue;
      }

      this._render_image(ctx, i, image[i], sx, sy, sw, sh, _angle);
    }

    if (finished && !this._images_rendered) {
      this._images_rendered = true;
      return this.notify_finished();
    }
  }

 protected _draw_legend_box(ctx: Context2d, bbox: BBox): void {
   ctx.beginPath()
   ctx.rect(bbox.x, bbox.y, bbox.width, bbox.height)
   this.visuals.background_fill.set_value(ctx)
   ctx.fill()
   if (this.visuals.border_line.doit) {
     this.visuals.border_line.set_value(ctx)
     ctx.stroke()
   }
 }

 _draw_legend_box(ctx: Context2d, bbox) {
   ctx.beginPath();
   ctx.rect(bbox.x, bbox.y, bbox.width, bbox.height);
   this.visuals.background_fill.set_value(ctx);
   ctx.fill();
   if (this.visuals.border_line.doit) {
     this.visuals.border_line.set_value(ctx);
     return ctx.stroke();
   }
 }