|
@@ -19,63 +19,54 @@
|
|
|
*/
|
|
|
|
|
|
import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
|
|
|
-import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
|
|
|
+import {
|
|
|
+ SColor,
|
|
|
+ SPainter,
|
|
|
+ SPath2D,
|
|
|
+ SPoint,
|
|
|
+ SRect
|
|
|
+} from "@sybotan-web/draw/lib";
|
|
|
|
|
|
/**
|
|
|
- * 用户标记item
|
|
|
+ * 蒙版item
|
|
|
*
|
|
|
* @author 郝建龙
|
|
|
*/
|
|
|
-export class UserMark extends SGraphyItem {
|
|
|
- /** 标记宽度 */
|
|
|
- private width: number = 20;
|
|
|
- /** 标记高度 */
|
|
|
- private height: number = 20;
|
|
|
+export class SceneMarkItem extends SGraphyItem {
|
|
|
/** 轮廓线坐标 */
|
|
|
outLine: SPoint[] = [];
|
|
|
/** 是否闭合 */
|
|
|
closeFlag = false;
|
|
|
+ /** 鼠标移动点 */
|
|
|
+ private lastPoint = new SPoint();
|
|
|
+ /** 蒙版 */
|
|
|
+ private mask = new SPath2D();
|
|
|
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
* @param parent 指向父对象
|
|
|
- * @param data 标记数据
|
|
|
+ * @param data 蒙版起点数据
|
|
|
*/
|
|
|
constructor(parent: SGraphyItem | null, data: SPoint) {
|
|
|
super(parent);
|
|
|
this.outLine.push(data);
|
|
|
+ this.lastPoint = data;
|
|
|
+ this.zOrder = Number.MAX_SAFE_INTEGER;
|
|
|
} // Constructor
|
|
|
|
|
|
/**
|
|
|
- * Item对象边界区域
|
|
|
- *
|
|
|
- * @return SRect
|
|
|
- */
|
|
|
- boundingRect(): SRect {
|
|
|
- return new SRect(0, 0, this.width, this.height);
|
|
|
- } // Function boundingRect()
|
|
|
-
|
|
|
- /**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
* @param event 事件参数
|
|
|
* @return boolean
|
|
|
*/
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
- if (!this.closeFlag) {
|
|
|
- console.log("mouseDown");
|
|
|
- let newPoint = this.outLine[this.outLine.length - 1];
|
|
|
- if (
|
|
|
- newPoint.x == this.outLine[0].x &&
|
|
|
- newPoint.y == this.outLine[0].y
|
|
|
- ) {
|
|
|
- this.closeFlag = true;
|
|
|
- } else {
|
|
|
- newPoint = new SPoint(event.x, event.y);
|
|
|
- console.log(newPoint);
|
|
|
- this.outLine.push(newPoint);
|
|
|
- }
|
|
|
+ if (!this.closeFlag && event.buttons == 1) {
|
|
|
+ let p = new SPoint(event.x, event.y);
|
|
|
+ this.lastPoint.x = p.x;
|
|
|
+ this.lastPoint.y = p.y;
|
|
|
+ this.outLine.push(p);
|
|
|
}
|
|
|
return true;
|
|
|
} // Function onMouseDown()
|
|
@@ -87,29 +78,38 @@ export class UserMark extends SGraphyItem {
|
|
|
* @return boolean
|
|
|
*/
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
- console.log("mouseMove");
|
|
|
if (!this.closeFlag) {
|
|
|
- let first, newLast;
|
|
|
- if (this.outLine.length > 1) {
|
|
|
- this.outLine.pop();
|
|
|
- first = this.outLine[0];
|
|
|
- }
|
|
|
- newLast = new SPoint(event.x, event.y);
|
|
|
- if (this.outLine.length > 2 && first) {
|
|
|
- if (
|
|
|
- event.x + 20 >= first.x &&
|
|
|
- event.x - 20 <= first.x &&
|
|
|
- event.y + 20 >= first.y &&
|
|
|
- event.y - 20 <= first.y
|
|
|
- ) {
|
|
|
- newLast = first;
|
|
|
- }
|
|
|
- }
|
|
|
- this.outLine.push(newLast);
|
|
|
+ this.lastPoint = new SPoint(event.x, event.y);
|
|
|
}
|
|
|
return true;
|
|
|
} // Function onMouseMove()
|
|
|
|
|
|
+ /***
|
|
|
+ * 键盘按键弹起事件
|
|
|
+ *
|
|
|
+ * @param event 事件参数
|
|
|
+ */
|
|
|
+ onKeyUp(event: KeyboardEvent): void {
|
|
|
+ if (event.keyCode == 13 && this.outLine.length >= 3) {
|
|
|
+ this.createMask();
|
|
|
+ }
|
|
|
+ } // Function onKeydown()
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建蒙版
|
|
|
+ *
|
|
|
+ */
|
|
|
+ createMask(): void {
|
|
|
+ this.closeFlag = true;
|
|
|
+ this.mask = new SPath2D();
|
|
|
+ this.mask.moveTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
|
|
|
+ this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
|
|
|
+ this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
|
|
|
+ this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
|
|
|
+ this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
|
|
|
+ this.mask.polygon(this.outLine);
|
|
|
+ } // Function createMask()
|
|
|
+
|
|
|
/**
|
|
|
* Item绘制操作
|
|
|
*
|
|
@@ -117,18 +117,17 @@ export class UserMark extends SGraphyItem {
|
|
|
* @param rect 绘制区域
|
|
|
*/
|
|
|
onDraw(painter: SPainter, rect?: SRect): void {
|
|
|
- if (this.visible) {
|
|
|
+ if (this.closeFlag) {
|
|
|
+ painter.pen.color = SColor.Transparent;
|
|
|
+ painter.brush.color = new SColor("#FFFF0080");
|
|
|
+ painter.drawPath(this.mask);
|
|
|
+ } else {
|
|
|
painter.pen.color = new SColor("#ff0000");
|
|
|
- painter.pen.lineWidth = 2;
|
|
|
- if (this.closeFlag) {
|
|
|
- painter.brush.color = new SColor("#ff0000");
|
|
|
- } else {
|
|
|
- painter.brush.color = new SColor("#ffffff80");
|
|
|
- }
|
|
|
- this.outLine.map(t => {
|
|
|
- painter.drawRect(t.x - 4, t.y - 4, 8, 8);
|
|
|
- });
|
|
|
painter.drawPolyline(this.outLine);
|
|
|
+ painter.drawLine(
|
|
|
+ this.outLine[this.outLine.length - 1],
|
|
|
+ this.lastPoint
|
|
|
+ );
|
|
|
}
|
|
|
} // Function onDraw()
|
|
|
-} // Class UserMark
|
|
|
+} // Class SceneMarkItem
|