TypeScript Context2d.arc方法代碼示例

本文整理匯總了TypeScript中core/util/canvas.Context2d.arc方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript Context2d.arc方法的具體用法？TypeScript Context2d.arc怎麽用？TypeScript Context2d.arc使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類core/util/canvas.Context2d的用法示例。

在下文中一共展示了Context2d.arc方法的10個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: _render

  protected _render(ctx: Context2d, indices: number[],
                    {sx, sy, _start_angle, _angle, sinner_radius, souter_radius}: AnnularWedgeData): void {
    const direction = this.model.properties.direction.value();

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

      ctx.translate(sx[i], sy[i]);
      ctx.rotate(_start_angle[i]);

      ctx.moveTo(souter_radius[i], 0);
      ctx.beginPath();
      ctx.arc(0, 0, souter_radius[i], 0, _angle[i], direction);
      ctx.rotate(_angle[i]);
      ctx.lineTo(sinner_radius[i], 0);
      ctx.arc(0, 0, sinner_radius[i], 0, -_angle[i], !direction);
      ctx.closePath();

      ctx.rotate(-_angle[i]-_start_angle[i]);
      ctx.translate(-sx[i], -sy[i]);

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i);
        ctx.fill();
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i);
        ctx.stroke();
      }
    }
  }

開發者ID:Zyell，項目名稱:bokeh，代碼行數:33，代碼來源:annular_wedge.ts

示例2: _render

  _render(ctx: Context2d, indices: number[],
          {sx, sy, smodule, _angle, _teeth, _pressure_angle, _shaft_size, _internal}: GearData): void {
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + _angle[i] + smodule[i] + _teeth[i] + _pressure_angle[i] + _shaft_size[i]))
        continue

      const fn = _internal[i] ? internal_gear_tooth : gear_tooth
      const seq0 = fn(smodule[i], _teeth[i], _pressure_angle[i])
      const [, x, y, ...seq] = seq0

      ctx.save()
      ctx.translate(sx[i], sy[i])
      ctx.rotate(_angle[i])

      ctx.beginPath()

      const rot = 2*Math.PI/_teeth[i]
      ctx.moveTo(x as number, y as number)

      for (let j = 0; j < _teeth[i]; j++) {
        this._render_seq(ctx, seq)
        ctx.rotate(rot)
      }

      ctx.closePath()

      const pitch_radius = smodule[i]*_teeth[i]/2
      if (_internal[i]) {
        const rim_radius = pitch_radius + 2.75*smodule[i]
        ctx.moveTo(rim_radius, 0)
        ctx.arc(0, 0, rim_radius, 0, 2*Math.PI, true)
      } else if (_shaft_size[i] > 0) {
        const shaft_radius = pitch_radius*_shaft_size[i]
        ctx.moveTo(shaft_radius, 0)
        ctx.arc(0, 0, shaft_radius, 0, 2*Math.PI, true)
      }

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i)
        ctx.fill()
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i)
        ctx.stroke()
      }

      ctx.restore()
    }
  }

開發者ID:digitalsatori，項目名稱:Bokeh，代碼行數:50，代碼來源:gear.ts

示例3: circle

function circle(ctx: Context2d, i: number, r: number, line: Line, fill: Fill): void {
  ctx.arc(0, 0, r, 0, 2*Math.PI, false)

  if (fill.doit) {
    fill.set_vectorize(ctx, i)
    ctx.fill()
  }

  if (line.doit) {
    line.set_vectorize(ctx, i)
    ctx.stroke()
  }

}

開發者ID:digitalsatori，項目名稱:Bokeh，代碼行數:14，代碼來源:defs.ts

示例4: function

const circle_x = function(ctx: Context2d, i, _sx, _sy, r, line, fill) {
  ctx.arc(0, 0, r, 0, 2*Math.PI, false);

  if (fill.doit) {
    fill.set_vectorize(ctx, i);
    ctx.fill();
  }

  if (line.doit) {
    line.set_vectorize(ctx, i);
    _one_x(ctx, r);
    ctx.stroke();
  }

};

開發者ID:FourtekIT-incubator，項目名稱:bokeh，代碼行數:15，代碼來源:index.ts

示例5: _render

  _render(ctx: Context2d, indices, {sx, sy, sradius, _start_angle, _end_angle}) {
    if (this.visuals.line.doit) {
      const direction = this.model.properties.direction.value();
      for (const i of indices) {
        if (isNaN(sx[i]+sy[i]+sradius[i]+_start_angle[i]+_end_angle[i])) {
          continue;
        }

        ctx.beginPath();
        ctx.arc(sx[i], sy[i], sradius[i], _start_angle[i], _end_angle[i], direction);

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

開發者ID:FourtekIT-incubator，項目名稱:bokeh，代碼行數:16，代碼來源:arc.ts

示例6: _render

  protected _render(ctx: Context2d, indices: number[],
                    {sx, sy, sradius, _start_angle, _end_angle}: ArcData): void {
    if (this.visuals.line.doit) {
      const direction = this.model.properties.direction.value()

      for (const i of indices) {
        if (isNaN(sx[i] + sy[i] + sradius[i] + _start_angle[i] + _end_angle[i]))
          continue

        ctx.beginPath()
        ctx.arc(sx[i], sy[i], sradius[i], _start_angle[i], _end_angle[i], direction)

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

開發者ID:Zyell，項目名稱:bokeh，代碼行數:17，代碼來源:arc.ts

示例7: _render

  protected _render(ctx: Context2d, indices: number[], {sx, sy, sradius}: CircleData): void {
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + sradius[i]))
        continue

      ctx.beginPath()
      ctx.arc(sx[i], sy[i], sradius[i], 0, 2*Math.PI, false)

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i)
        ctx.fill()
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i)
        ctx.stroke()
      }
    }
  }

開發者ID:digitalsatori，項目名稱:Bokeh，代碼行數:19，代碼來源:circle.ts

示例8: _render

  _render(ctx: Context2d, indices, {sx, sy, sradius}) {
    for (const i of indices) {
      if (isNaN(sx[i]+sy[i]+sradius[i])) {
        continue;
      }

      ctx.beginPath();
      ctx.arc(sx[i], sy[i], sradius[i], 0, 2*Math.PI, false);

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i);
        ctx.fill();
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i);
        ctx.stroke();
      }
    }
  }

開發者ID:FourtekIT-incubator，項目名稱:bokeh，代碼行數:20，代碼來源:circle.ts

示例9: _render

  protected _render(ctx: Context2d, indices: number[], {sx, sy, sradius, _start_angle, _end_angle}: WedgeData): void {
    const direction = this.model.properties.direction.value();

    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + sradius[i] + _start_angle[i] + _end_angle[i]))
        continue;

      ctx.beginPath();
      ctx.arc(sx[i], sy[i], sradius[i], _start_angle[i], _end_angle[i], direction);
      ctx.lineTo(sx[i], sy[i]);
      ctx.closePath();

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i);
        ctx.fill();
      }

      if (this.visuals.line.doit) {
        this.visuals.line.set_vectorize(ctx, i);
        ctx.stroke();
      }
    }
  }

開發者ID:，項目名稱:，代碼行數:23，代碼來源:

示例10: _render

  _render(ctx: Context2d, indices, {sx, sy, sinner_radius, souter_radius}) {
    for (const i of indices) {
      if (isNaN(sx[i] + sy[i] + sinner_radius[i] + souter_radius[i]))
        continue;

      // Because this visual has a whole in it, it proved "challenging"
      // for some browsers to render if drawn in one go --- i.e. it did not
      // work on IE. If we render in two parts (upper and lower part),
      // it is unambiguous what part should be filled. The line is
      // better drawn in one go though, otherwise the part where the pieces
      // meet will not be fully closed due to aa.

      // Detect Microsoft browser. Might need change for newer versions.
      const isie = ((navigator.userAgent.indexOf('MSIE') >= 0) ||
              (navigator.userAgent.indexOf('Trident') > 0) ||
              (navigator.userAgent.indexOf('Edge') > 0));

      if (this.visuals.fill.doit) {
        this.visuals.fill.set_vectorize(ctx, i);
        ctx.beginPath();
        if (isie) {
            // Draw two halves of the donut. Works on IE, but causes an aa line on Safari.
            for (const clockwise of [false, true]) {
            ctx.arc(sx[i], sy[i], sinner_radius[i], 0, Math.PI, clockwise);
            ctx.arc(sx[i], sy[i], souter_radius[i], Math.PI, 0, !clockwise);
            }
        } else {
            // Draw donut in one go. Does not work on iE.
            ctx.arc(sx[i], sy[i], sinner_radius[i], 0, 2 * Math.PI, true);
            ctx.arc(sx[i], sy[i], souter_radius[i], 2 * Math.PI, 0, false);
          }
        ctx.fill();
      }

      if (this.visuals.line.doit) {
          this.visuals.line.set_vectorize(ctx, i);
          ctx.beginPath();
          ctx.arc(sx[i], sy[i], sinner_radius[i], 0, 2*Math.PI);
          ctx.moveTo(sx[i]+souter_radius[i], sy[i]);
          ctx.arc(sx[i], sy[i], souter_radius[i], 0, 2*Math.PI);
          ctx.stroke();
      }
    }
  }

開發者ID:FourtekIT-incubator，項目名稱:bokeh，代碼行數:44，代碼來源:annulus.ts

注：本文中的core/util/canvas.Context2d.arc方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。