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