123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- <template>
- <div>
- <el-button @click="show">展示</el-button>
- <el-button @click="create">创建</el-button>
- <el-button @click="edit">编辑</el-button>
- <canvas id="editLine" width="740" height="400" tabindex="0" />
- </div>
- </template>
- <script lang='ts'>
- import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/";
- import {SMouseEvent} from "@saga-web/base/";
- import {SColor, SLine, SPainter, SPoint, SRect} from "@saga-web/draw";
- import {SRelationState} from "@saga-web/big/lib/enums/SRelationState";
- import {SMathUtil} from "@saga-web/big/lib/utils/SMathUtil";
- /**
- * 直线item
- *
- * */
- class SLineItem extends SGraphItem {
- /** 线段 */
- line: SPoint[] = [];
- /** 是否完成绘制 */
- _status: SRelationState = SRelationState.Create;
- get status(): SRelationState {
- return this._status;
- }
- set status(v: SRelationState) {
- this._status = v;
- this.update();
- }
- /** 线条颜色 */
- _strokeColor: string = "#000000";
- get strokeColor(): string {
- return this._strokeColor;
- }
- set strokeColor(v: string) {
- this._strokeColor = v;
- this.update();
- }
- /** 填充色 */
- _fillColor: string = "#2196f3";
- get fillColor(): string {
- return this._fillColor;
- }
- set fillColor(v: string) {
- this._fillColor = v;
- this.update();
- }
- /** 线条宽度 */
- _lineWidth: number = 1;
- get lineWidth(): number {
- return this._lineWidth;
- }
- set lineWidth(v: number) {
- this._lineWidth = v;
- this.update();
- }
- /** 拖动灵敏度 */
- dis: number = 10;
- /** 拖动灵敏度 */
- sceneDis: number = 10;
- /**
- * 构造函数
- *
- * @param parent 父级
- * @param line 坐标集合
- * */
- constructor(parent: SGraphItem | null, line: SPoint[]);
- /**
- * 构造函数
- *
- * @param parent 父级
- * @param point 第一个点坐标
- * */
- constructor(parent: SGraphItem | null, point: SPoint);
- /**
- * 构造函数
- *
- * @param parent 父级
- * @param l 坐标集合|第一个点坐标
- * */
- constructor(parent: SGraphItem | null, l: SPoint | SPoint[]) {
- super(parent);
- if (l instanceof SPoint) {
- this.line.push(l);
- } else {
- this.line = l;
- }
- }
- /**
- * 鼠标按下事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- * */
- onMouseDown(event: SMouseEvent): boolean {
- console.log(this);
- if (this.status == SRelationState.Normal) {
- return super.onMouseDown(event);
- } else if (this.status == SRelationState.Edit) {
- } else if (this.status == SRelationState.Create) {
- }
- this.$emit("mousedown");
- return true;
- } // Function onMouseDown()
- /**
- * 鼠标移动事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- * */
- onMouseMove(event: SMouseEvent): boolean {
- if (this.status == SRelationState.Create) {
- return true;
- } else {
- return super.onMouseMove(event);
- }
- } // Function onMouseMove()
- /**
- * 鼠标移动事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- * */
- onMouseUp(event: SMouseEvent): boolean {
- // if (this.status == SRelationState.Create) {
- // this.status = SRelationState.Edit;
- // return true;
- // } else {
- return super.onMouseUp(event);
- // }
- } // Function onMouseUp()
- /**
- * 判断点是否在区域内
- *
- * @param x
- * @param y
- * @return true-是
- */
- contains(x: number, y: number): boolean {
- if (this.line.length == 2) {
- let p = new SPoint(x, y);
- if (
- SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1])).MinDis <
- this.dis
- ) {
- return true;
- }
- }
- return false;
- } // Function contains()
- /**
- * Item对象边界区域
- *
- * @return SRect
- */
- boundingRect(): SRect {
- if (this.line.length == 2) {
- let x: number = this.line[0].x > this.line[1].x ? this.line[1].x : this.line[0].x;
- let y: number = this.line[0].x > this.line[1].x ? this.line[1].y : this.line[0].y;
- let width: number = Math.abs(this.line[0].x - this.line[1].x);
- let height: number = Math.abs(this.line[0].y - this.line[1].y);
- return new SRect(
- x,
- y,
- width,
- height
- );
- } else {
- return new SRect();
- }
- } // Function boundingRect()
- /**
- * Item绘制操作
- *
- * @param painter painter对象
- */
- onDraw(painter: SPainter): void {
- this.sceneDis = painter.toPx(this.dis);
- painter.pen.lineWidth = painter.toPx(this.lineWidth);
- painter.pen.color = new SColor(this.strokeColor);
- if (this.p1 instanceof SPoint && this.p2 instanceof SPoint) {
- // 绘制外轮廓
- painter.brush.color = SColor.Transparent;
- painter.pen.color = new SColor("#128eee");
- painter.drawRect(this.boundingRect());
- // 绘制基本图形
- painter.pen.color = new SColor(this.strokeColor);// 需注释
- painter.drawLine(this.p1, this.p2);
- // 编辑态
- if (this.status == SRelationState.Edit) {
- painter.brush.color = SColor.White;
- // painter.brush.color = new SColor(this.fillColor);
- painter.drawCircle(this.p1.x, this.p1.y, painter.toPx(5));
- painter.drawCircle(this.p2.x, this.p2.y, painter.toPx(5));
- }
- }
- } // Function onDraw()
- } // Class SLineItem
- export default {
- data() {
- return {
- scene: null,
- view: null
- };
- },
- mounted(): void {
- this.view = new SGraphView("editLine");
- },
- methods: {
- show() {
- const scene = new SGraphScene();
- this.view.scene = scene;
- const line: SPoint[] = [new SPoint(100, 100), new SPoint(300, 300)];
- const lineItem = new SLineItem(null, line);
- lineItem.status = SRelationState.Normal;
- scene.addItem(lineItem);
- this.view.fitSceneToView();
- },
- create() {
- const scene = new SGraphScene();
- this.view.scene = scene;
- const lineItem = new SLineItem(null, [] );
- lineItem.status = SRelationState.Create;
- scene.addItem(lineItem);
- scene.grabItem = lineItem;
- this.view.fitSceneToView();
- },
- edit() {
- }
- }
- };
- </script>
|