TypeScript tabris.CanvasContext类代码示例

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

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

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

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

示例1: drawHourLabel

 private drawHourLabel(ctx: CanvasContext, hour: number) {
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
   let hourNumber = new Date(hour).getHours();
   let hourString = (hourNumber < 10) ? "0" + hourNumber + ":00" : hourNumber + ":00";
   ctx.fillText(hourString, this.getX(hour), this.getY(this.scale.minY) + 1);
 }

开发者ID:Homoola，项目名称:tabris-js，代码行数:7，代码来源:weatherGraph.ts

示例2: drawHermiteInterpolation

 private drawHermiteInterpolation(ctx: CanvasContext, points: Point[]) {
   ctx.strokeStyle = graphLineColor;
   ctx.lineWidth = graphLineWidth;
   for (let i = 0; i < points.length - 1; i++) {
     ctx.beginPath();
     let [b0, b3] = [points[i], points[i + 1]];
     let h = (b3.x - b0.x) / 3;
     let b1 = { x: b0.x + h, y: b0.y + (h * b0.dydx) };
     let b2 = { x: b3.x - h, y: b3.y - (h * b3.dydx) };
     ctx.moveTo(this.getX(b0.x), this.getY(b0.y));
     ctx.bezierCurveTo(
       this.getX(b1.x), this.getY(b1.y),
       this.getX(b2.x), this.getY(b2.y),
       this.getX(b3.x), this.getY(b3.y)
     );
     ctx.stroke();
   }
 }

开发者ID:Homoola，项目名称:tabris-js，代码行数:18，代码来源:weatherGraph.ts

示例3: drawArea

 private drawArea(ctx: CanvasContext, startTime: number, endTime: number, color: string) {
   ctx.fillStyle = color;
   let graphHeight = this.get("height") - margins.top - margins.bottom;
   ctx.fillRect(this.getX(startTime),
     this.getY(this.scale.maxY),
     this.getX(endTime) - this.getX(startTime),
     graphHeight
   );
 };

开发者ID:Homoola，项目名称:tabris-js，代码行数:9，代码来源:weatherGraph.ts

示例4: drawTemperatureScale

 private drawTemperatureScale(ctx: CanvasContext) {
   let degreeHeight = this.getY(this.scale.minY) - this.getY(this.scale.minY + 1);
   let degreeStep = (degreeHeight > minVerticalDistance) ? 1 : (2 * degreeHeight > minVerticalDistance) ? 2 : 5;
   let minHeight = Math.ceil(this.scale.minY / degreeStep) * degreeStep;
   ctx.strokeStyle = uiLineColor;
   ctx.lineWidth = uiLineWidth;
   for (let height = minHeight; height < this.scale.maxY; height += degreeStep) {
     // horizontal line
     ctx.beginPath();
     ctx.moveTo(this.getX(this.scale.minX), this.getY(height));
     ctx.lineTo(this.getX(this.scale.maxX), this.getY(height));
     ctx.stroke();
     // text label
     ctx.fillStyle = uiTextColor;
     ctx.font = uiFont;
     ctx.textAlign = "right";
     ctx.textBaseline = "middle";
     ctx.fillText(height + "Â°C", this.getX(this.scale.minX) - 2, this.getY(height));
   }
 }

开发者ID:Homoola，项目名称:tabris-js，代码行数:20，代码来源:weatherGraph.ts

示例5: drawPoint

 private drawPoint(ctx: CanvasContext, point: Point) {
   ctx.fillStyle = graphLineColor;
   ctx.fillRect(this.getX(point.x) - 2, this.getY(point.y) - 2, 4, 4);
 }

开发者ID:Homoola，项目名称:tabris-js，代码行数:4，代码来源:weatherGraph.ts

示例6: drawDayLabel

 private drawDayLabel(ctx: CanvasContext, day: number) {
   ctx.textAlign = "left";
   ctx.textBaseline = "bottom";
   let dayName = daysNames[new Date(day).getDay()];
   ctx.fillText(dayName, this.getX(day) + 3, this.getY(this.scale.maxY) + 1);
 }

开发者ID:Homoola，项目名称:tabris-js，代码行数:6，代码来源:weatherGraph.ts

示例7: drawVerticalLine

 private drawVerticalLine(ctx: CanvasContext, time: number, extraLength: number) {
   ctx.beginPath();
   ctx.moveTo(this.getX(time), this.getY(this.scale.minY));
   ctx.lineTo(this.getX(time), this.getY(this.scale.maxY) - extraLength);
   ctx.stroke();
 }

开发者ID:Homoola，项目名称:tabris-js，代码行数:6，代码来源:weatherGraph.ts

示例8: Canvas

import {Canvas, CanvasContext, ImageData, ColorValue, FontValue} from 'tabris';

let ctx: CanvasContext = new Canvas().getContext('2d', 100, 100);

// Properties
let fillStyle: ColorValue;
let font: FontValue;
let lineCap: 'butt' | 'round' | 'square';
let lineJoin: 'bevel' | 'miter' | 'round';
let lineWidth: number;
let strokeStyle: ColorValue;
let textAlign: 'center' | 'end' | 'left' | 'right' | 'start';
let textBaseline: 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';

fillStyle = ctx.fillStyle;
font = ctx.font;
lineCap = ctx.lineCap;
lineJoin = ctx.lineJoin;
lineWidth = ctx.lineWidth;
strokeStyle = ctx.strokeStyle;
textAlign = ctx.textAlign;
textBaseline = ctx.textBaseline;

ctx.fillStyle = fillStyle;
ctx.font = font;
ctx.lineCap = lineCap;
ctx.lineJoin = lineJoin;
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeStyle;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;

开发者ID:eclipsesource，项目名称:tabris-js，代码行数:31，代码来源:CanvasContext.test.ts

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