12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <template>
- <canvas height="250" id="circle" width="740"/>
- </template>
- <script lang="ts">
- import { SCanvasView, SColor, SLineCapStyle, SPainter, SRect } from "@persagy-web/draw/lib";
- import { Component, Vue } from "vue-property-decorator";
- /**
- * 绘制圆形
- *
- * @author 郝洁 <haojie@persagy.com>
- */
- class TestView extends SCanvasView {
- /**
- * 构造函数
- */
- constructor() {
- super("circle")
- }
- /**
- * Item 绘制操作
- * @param painter 绘制对象
- */
- onDraw(canvas: SPainter): void {
- canvas.clearRect(new SRect(0, 0, 800, 400));
- canvas.pen.color = SColor.Blue;
- canvas.brush.color = SColor.Red;
- canvas.drawCircle(100, 100, 50);
- canvas.pen.lineWidth = 10;
- canvas.pen.lineDash = [10, 11];
- canvas.pen.lineCapStyle = SLineCapStyle.Butt;
- canvas.pen.color = new SColor("#585858");
- canvas.brush.color = new SColor("#585858");
- canvas.pen.dashOffset = new Date().getTime() / 50 % 60;
- canvas.drawCircle(230, 100, 40);
- canvas.pen.dashOffset = -new Date().getTime() / 50 % 60;
- canvas.drawCircle(315, 100, 40);
- canvas.pen.color = SColor.Transparent;
- canvas.brush.color = SColor.White;
- canvas.drawCircle(230, 100, 15);
- canvas.drawCircle(315, 100, 15);
- canvas.pen.color = SColor.Red;
- for (let i = 0; i < 360; i += 10) {
- let q1 = i * Math.PI / 180;
- let q2 = (i + 120) * Math.PI / 180;
- canvas.drawLine(
- 450 + 50 * Math.cos(q1),
- 100 + 50 * Math.sin(q1),
- 450 + 50 * Math.cos(q2),
- 100 + 50 * Math.sin(q2));
- }
- canvas.pen.color = SColor.Blue;
- for (let i = 0; i < 360; i += 10) {
- let q = i * Math.PI / 180;
- canvas.drawLine(
- 650,
- 100,
- 650 + 50 * Math.cos(q),
- 100 + 50 * Math.sin(q));
- }
- this.update();
- }
- }
- @Component
- export default class Circle1 extends Vue {
- /**
- * 页面挂载
- */
- mounted(): void {
- new TestView();
- }
- }
- </script>
- <style scoped>
- </style>
|