|
@@ -14,34 +14,36 @@
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <canvas id="arrow" width="740" height="400" tabindex="0"/>
|
|
|
+ <canvas :id="id" width="740" height="400" tabindex="0"/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script lang="ts">
|
|
|
import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
|
|
|
- import {SRect, SArrowStyleType, SColor, SPoint} from "@persagy-web/draw/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(){
|
|
|
+ get begin():SArrowStyleType{
|
|
|
return this._begin;
|
|
|
}
|
|
|
- set begin(v){
|
|
|
+ set begin(v:SArrowStyleType){
|
|
|
this._begin = v;
|
|
|
this.update();
|
|
|
}
|
|
|
/** 结束点样式 */
|
|
|
_end = SArrowStyleType.Basic;
|
|
|
- get end(){
|
|
|
+ get end():SArrowStyleType{
|
|
|
return this._end;
|
|
|
}
|
|
|
- set end(v){
|
|
|
+ set end(v:SArrowStyleType){
|
|
|
this._end = v;
|
|
|
this.update();
|
|
|
}
|
|
|
- pointList = [
|
|
|
+ pointList: SPoint[] = [
|
|
|
new SPoint(0, 0),
|
|
|
new SPoint(2000, 100),
|
|
|
new SPoint(1800, 1800),
|
|
@@ -50,10 +52,10 @@
|
|
|
new SPoint(0, 0)
|
|
|
];
|
|
|
|
|
|
- boundingRect() {
|
|
|
+ boundingRect():SRect {
|
|
|
return new SRect(0,0,2000,1800);
|
|
|
}
|
|
|
- onDraw(painter) {
|
|
|
+ onDraw(painter:SPainter) {
|
|
|
painter.pen.lineWidth = painter.toPx(1);
|
|
|
const style = {
|
|
|
begin: this.begin,
|
|
@@ -66,81 +68,76 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- export default {
|
|
|
- name: "arrow",
|
|
|
- data(){
|
|
|
- return {
|
|
|
- view:'',
|
|
|
- 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'
|
|
|
- }
|
|
|
- ],
|
|
|
- item: null,
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- val: 'None',
|
|
|
- desc: '无样式'
|
|
|
- },{
|
|
|
- val: 'Basic',
|
|
|
- desc: '基本箭头'
|
|
|
- },
|
|
|
- {
|
|
|
- val: 'Triangle',
|
|
|
- desc: '三角形箭头'
|
|
|
- },
|
|
|
- {
|
|
|
- val: 'Diamond',
|
|
|
- desc: '菱形箭头'
|
|
|
- },
|
|
|
- {
|
|
|
- val: 'Square',
|
|
|
- desc: '方形箭头'
|
|
|
- },
|
|
|
- {
|
|
|
- val: 'Circle',
|
|
|
- desc: '圆形箭头'
|
|
|
- },
|
|
|
- ],
|
|
|
- begin: SArrowStyleType.None,
|
|
|
- end: SArrowStyleType.None
|
|
|
+ @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'
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init()
|
|
|
- },
|
|
|
- methods:{
|
|
|
- init(){
|
|
|
- this.view = new SGraphView('arrow');
|
|
|
- const scene = new SGraphScene();
|
|
|
- this.item = new Polyline(null);
|
|
|
- scene.addItem(this.item);
|
|
|
- this.view.scene = scene;
|
|
|
- this.view.fitSceneToView();
|
|
|
- this.view.scalable = false;
|
|
|
+ ];
|
|
|
+ view: SGraphView | undefined;
|
|
|
+ item: Polyline | undefined;
|
|
|
+ tableData = [
|
|
|
+ {
|
|
|
+ val: 'None',
|
|
|
+ desc: '无样式'
|
|
|
+ },{
|
|
|
+ val: 'Basic',
|
|
|
+ desc: '基本箭头'
|
|
|
},
|
|
|
- changeStart(val){
|
|
|
- this.item.begin = val
|
|
|
+ {
|
|
|
+ val: 'Triangle',
|
|
|
+ desc: '三角形箭头'
|
|
|
},
|
|
|
- changeEnd(val){
|
|
|
- this.item.end = val
|
|
|
- }
|
|
|
+ {
|
|
|
+ val: 'Diamond',
|
|
|
+ desc: '菱形箭头'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 'Square',
|
|
|
+ desc: '方形箭头'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 'Circle',
|
|
|
+ desc: '圆形箭头'
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ begin:SArrowStyleType = SArrowStyleType.None;
|
|
|
+ end:SArrowStyleType = SArrowStyleType.None;
|
|
|
+ mounted():void {
|
|
|
+ this.init()
|
|
|
+ };
|
|
|
+ init(){
|
|
|
+ this.view = new SGraphView('arrow');
|
|
|
+ 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>
|