|
@@ -3,176 +3,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import { SColor, SPainter, SRect } from "@persagy-web/draw";
|
|
|
- import { SGraphItem, SGraphScene, SGraphView } from "@persagy-web/graph";
|
|
|
-
|
|
|
- class ClockItem extends SGraphItem {
|
|
|
- /** 宽度 */
|
|
|
- width = 100;
|
|
|
- /** 高度 */
|
|
|
- height = 100;
|
|
|
-
|
|
|
- /** 半径 */
|
|
|
- get radius(): number {
|
|
|
- return Math.min(this.width, this.height) / 2.0;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 构造函数
|
|
|
- *
|
|
|
- * @param parent 指向父Item
|
|
|
- * @param width 宽度
|
|
|
- * @param height 高度
|
|
|
- */
|
|
|
- constructor(parent: SGraphItem | null, width: number, height: number) {
|
|
|
- super(parent);
|
|
|
- this.width = width;
|
|
|
- this.height = height;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 对象边界区域
|
|
|
- *
|
|
|
- * @return 边界区域
|
|
|
- */
|
|
|
- boundingRect(): SRect {
|
|
|
- return new SRect(0, 0, this.width, this.height);
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * Item绘制操作
|
|
|
- *
|
|
|
- * @param canvas 画布
|
|
|
- */
|
|
|
- onDraw(canvas: SPainter): void {
|
|
|
- canvas.translate(this.width / 2, this.height / 2);
|
|
|
- const t = new Date();
|
|
|
- this.drawScale(canvas);
|
|
|
- this.drawHour(canvas, t.getHours(), t.getMinutes(), t.getSeconds());
|
|
|
- this.drawMinute(canvas, t.getMinutes(), t.getSeconds());
|
|
|
- this.drawSecond(canvas, t.getSeconds() + t.getMilliseconds() / 1000.0);
|
|
|
-
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 绘制表刻度
|
|
|
- *
|
|
|
- * @param canvas 画布
|
|
|
- */
|
|
|
- private drawScale(canvas: SPainter): void {
|
|
|
- const scaleLength = Math.max(this.radius / 10.0, 2.0);
|
|
|
- const scaleLength1 = scaleLength * 1.2;
|
|
|
- const strokeWidth = Math.max(this.radius / 100.0, 2.0);
|
|
|
- const strokeWidth1 = strokeWidth * 2.0;
|
|
|
-
|
|
|
- canvas.save();
|
|
|
- canvas.pen.color = SColor.Blue;
|
|
|
-
|
|
|
- for (let i = 1; i <= 12; i++) {
|
|
|
- // 12小时刻度
|
|
|
- canvas.pen.lineWidth = strokeWidth1;
|
|
|
- canvas.drawLine(
|
|
|
- 0,
|
|
|
- -this.radius,
|
|
|
- 0,
|
|
|
- -this.radius + scaleLength1
|
|
|
- );
|
|
|
-
|
|
|
- if (this.radius >= 40) {
|
|
|
- // 如果半度大于40显示分钟刻度
|
|
|
- canvas.rotate((6 * Math.PI) / 180);
|
|
|
- for (let j = 1; j <= 4; j++) {
|
|
|
- // 分钟刻度
|
|
|
- canvas.pen.lineWidth = strokeWidth;
|
|
|
- canvas.drawLine(
|
|
|
- 0,
|
|
|
- -this.radius,
|
|
|
- 0,
|
|
|
- -this.radius + scaleLength
|
|
|
- );
|
|
|
- canvas.rotate((6 * Math.PI) / 180);
|
|
|
- }
|
|
|
- } else {
|
|
|
- canvas.rotate((30 * Math.PI) / 180);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- canvas.restore();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 绘制时针
|
|
|
- *
|
|
|
- * @param canvas 画布
|
|
|
- * @param hour 时
|
|
|
- * @param minute 分
|
|
|
- * @param second 秒
|
|
|
- */
|
|
|
- private drawHour(
|
|
|
- canvas: SPainter,
|
|
|
- hour: number,
|
|
|
- minute: number,
|
|
|
- second: number
|
|
|
- ): void {
|
|
|
- canvas.save();
|
|
|
- canvas.pen.color = SColor.Black;
|
|
|
- canvas.rotate(
|
|
|
- ((hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600) *
|
|
|
- Math.PI) /
|
|
|
- 180
|
|
|
- );
|
|
|
- canvas.drawLine(
|
|
|
- 0,
|
|
|
- this.radius / 10.0,
|
|
|
- 0,
|
|
|
- -this.radius / 2.0
|
|
|
- );
|
|
|
- canvas.restore();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 绘制秒针
|
|
|
- *
|
|
|
- * @param canvas 画布
|
|
|
- * @param minute 分
|
|
|
- * @param second 秒
|
|
|
- */
|
|
|
- private drawMinute(canvas: SPainter, minute: number, second: number): void {
|
|
|
- canvas.save();
|
|
|
- canvas.pen.color = SColor.Black;
|
|
|
- canvas.rotate(((minute * 6 + (second * 6) / 60.0) * Math.PI) / 180);
|
|
|
- canvas.drawLine(
|
|
|
- 0,
|
|
|
- this.radius / 10.0,
|
|
|
- 0,
|
|
|
- (-this.radius * 2.0) / 3.0
|
|
|
- );
|
|
|
- canvas.restore();
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * 绘制秒针
|
|
|
- *
|
|
|
- * @param canvas 画布
|
|
|
- * @param second 秒
|
|
|
- */
|
|
|
- private drawSecond(canvas: SPainter, second: number): void {
|
|
|
- canvas.save();
|
|
|
- canvas.pen.color = SColor.Red;
|
|
|
- canvas.rotate((second * 6 * Math.PI) / 180);
|
|
|
- canvas.drawLine(
|
|
|
- 0,
|
|
|
- this.radius / 5.0,
|
|
|
- 0,
|
|
|
- -this.radius + this.radius / 10.0
|
|
|
- );
|
|
|
- canvas.restore();
|
|
|
- }
|
|
|
- }
|
|
|
+ import { SGraphItem, SGraphScene, SGraphView, SGraphClockItem } from "@persagy-web/graph";
|
|
|
+ import { SPainter } from "@persagy-web/draw/lib";
|
|
|
|
|
|
class TestView extends SGraphView {
|
|
|
- clock1 = new ClockItem(null, 300, 300);
|
|
|
+ clock1 = new SGraphClockItem(null, 300, 300);
|
|
|
|
|
|
constructor() {
|
|
|
super("clockItem1");
|