123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <div>
- <el-table :data="tableData" style="width: 100%" class="elementTable">
- <el-table-column prop="val" label="值" width="180"></el-table-column>
- <el-table-column prop="desc" label="描述"></el-table-column>
- </el-table>
- <div style="margin: 14px 0;">
- <span style="font-size: 14px;">选择起始点样式</span>
- <el-select placeholder="请选择" @change="changeStart" size="small" v-model="begin">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
- </el-select>
- <span style="font-size: 14px;">选择结束点样式</span>
- <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
- </el-select>
- </div>
- <canvas :id="id" width="740" height="400" tabindex="0"/>
- </div>
- </template>
- <script lang="ts">
- import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
- import {SRect, SArrowStyleType, SColor, SPoint, SPainter} from "@persagy-web/draw/lib"
- import { Component, Prop, Vue } from "vue-property-decorator";
- import { v1 as uuid } from "uuid";
- class Polyline extends SGraphItem{
- /** 起始点样式 */
- _begin = SArrowStyleType.Basic;
- get begin():SArrowStyleType{
- return this._begin;
- }
- set begin(v:SArrowStyleType){
- this._begin = v;
- this.update();
- }
- /** 结束点样式 */
- _end = SArrowStyleType.Basic;
- get end():SArrowStyleType{
- return this._end;
- }
- set end(v:SArrowStyleType){
- this._end = v;
- this.update();
- }
- pointList: SPoint[] = [
- new SPoint(0, 0),
- new SPoint(1000, 1000),
- new SPoint(1200, 1800),
- new SPoint(1800, 1800),
- new SPoint(2000, 100),
- // new SPoint(0, 0)
- ];
- boundingRect():SRect {
- return new SRect(0,0,2000,1800);
- }
- onDraw(painter:SPainter) {
- painter.pen.lineWidth = painter.toPx(1);
- const style = {
- begin: this.begin,
- end: this.end
- };
- for(let i = 0; i < this.pointList.length - 1; i++){
- painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
- }
- }
- }
- @Component
- export default class ShadowCanvas extends Vue {
- id: string = uuid();
- options = [
- {
- value: SArrowStyleType.None,
- label: 'None'
- },{
- value: SArrowStyleType.Basic,
- label: 'Basic'
- },{
- value: SArrowStyleType.Triangle,
- label: 'Triangle'
- },{
- value: SArrowStyleType.Diamond,
- label: 'Diamond'
- },{
- value: SArrowStyleType.Square,
- label: 'Square'
- },{
- value: SArrowStyleType.Circle,
- label: 'Circle'
- }
- ];
- view: SGraphView | undefined;
- item: Polyline | undefined;
- tableData = [
- {
- val: 'None',
- desc: '无样式'
- },{
- val: 'Basic',
- desc: '基本箭头'
- },
- {
- val: 'Triangle',
- desc: '三角形箭头'
- },
- {
- val: 'Diamond',
- desc: '菱形箭头'
- },
- {
- val: 'Square',
- desc: '方形箭头'
- },
- {
- val: 'Circle',
- desc: '圆形箭头'
- },
- ];
- begin:SArrowStyleType = SArrowStyleType.Basic;
- end:SArrowStyleType = SArrowStyleType.Basic;
- mounted():void {
- this.init()
- };
- init(){
- this.view = new SGraphView(this.id);
- const scene = new SGraphScene();
- this.item = new Polyline(null);
- scene.addItem(this.item);
- this.view.scene = scene;
- this.view.fitSceneToView();
- this.view.scalable = false;
- };
- changeStart(val: SArrowStyleType):void{
- this.item!!.begin = val
- };
- changeEnd(val: SArrowStyleType):void{
- this.item!!.end = val
- }
- }
- </script>
|