|
@@ -5,6 +5,48 @@ import { useEditor } from "../../../..";
|
|
|
import { View } from "../View";
|
|
|
import { CompUI } from "../..";
|
|
|
import { values } from "lodash";
|
|
|
+import { Angle } from "@/modules/editor/controllers/SelectCtrl/objects/mathUtils";
|
|
|
+
|
|
|
+function findNearestPoint(points: number[][], w:number, h:number, sx:number, sy:number) {
|
|
|
+ const n = points.length;
|
|
|
+ let minv = 100000;
|
|
|
+ let minIndex = -1;
|
|
|
+ const positions = []
|
|
|
+
|
|
|
+ for(let i=0; i<n; i++) {
|
|
|
+ const p = points[i];
|
|
|
+ const x = w *p[0];
|
|
|
+ const y = h *p[1];
|
|
|
+ positions.push([x, y]);
|
|
|
+
|
|
|
+ const ln = (sx-x)*(sx-x) + (sy-y)*(sy-y);
|
|
|
+ if ( ln < minv ) {
|
|
|
+ minIndex = i;
|
|
|
+ minv = ln;
|
|
|
+ if(!(sx < (x -10) || sx > (x + 10) || sy < (y -10) || sy > (y+10) ) ) {
|
|
|
+ return {clicked: true, index: i};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let preIndex = minIndex -1;
|
|
|
+ if (preIndex < 0 ) preIndex = n-1;
|
|
|
+ let afterIndex = minIndex + 1;
|
|
|
+ if ( afterIndex >= n) afterIndex = 0;
|
|
|
+
|
|
|
+ const currV = {x:sx-positions[minIndex][0], y:sy-positions[minIndex][1]};
|
|
|
+ const preV = {x:positions[preIndex][0]-positions[minIndex][0], y:positions[preIndex][1]-positions[minIndex][1]}
|
|
|
+ const afterV = {x:positions[afterIndex][0]-positions[minIndex][0], y:positions[afterIndex][1]-positions[minIndex][1]}
|
|
|
+
|
|
|
+ const a1 = Angle(currV, preV)
|
|
|
+ const a2 = Angle(currV, afterV);
|
|
|
+
|
|
|
+ if (a1 < a2) {
|
|
|
+ return {index: preIndex};
|
|
|
+ }
|
|
|
+
|
|
|
+ return {index: minIndex};
|
|
|
+}
|
|
|
|
|
|
export const Component = defineComponent({
|
|
|
props: {
|
|
@@ -14,24 +56,33 @@ export const Component = defineComponent({
|
|
|
const { helper, controls , store} = useEditor();
|
|
|
const data = useCompData(props.compId);
|
|
|
const canvasRef = ref<HTMLCanvasElement>();
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
onMounted(()=>{
|
|
|
|
|
|
// draw();
|
|
|
let isDragingIndex = -1;
|
|
|
-
|
|
|
canvasRef.value?.addEventListener("dblclick", function(e:MouseEvent){
|
|
|
|
|
|
const x = helper.pxToDesignSize(e.offsetX )
|
|
|
const y = helper.pxToDesignSize(e.offsetY)
|
|
|
- console.log("dbclick=>xxxxx", x, y);
|
|
|
-
|
|
|
- //判断直线相交求解点到直线的距离
|
|
|
|
|
|
+ const points = data.value.points as number[][];
|
|
|
+ const w = data.layout.size[0];
|
|
|
+ const h = data.layout.size[1];
|
|
|
+ //判断直线相交求解点到直线的距离
|
|
|
+ const ret = findNearestPoint(data.value.points, w , h, x, y);
|
|
|
//判断是否
|
|
|
+ console.log("dbclick=>xxxxx", ret);
|
|
|
+ if (ret.clicked) {//点击删除
|
|
|
+ points.splice(ret.index, 1);
|
|
|
+ if (points.length < 4) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
+ } else {
|
|
|
+ points.splice(ret.index+1, 0, [x / w, y / h]);
|
|
|
+ }
|
|
|
+
|
|
|
+ draw();
|
|
|
})
|
|
|
|
|
|
canvasRef.value?.addEventListener("mousedown", function(e:MouseEvent){
|
|
@@ -139,10 +190,6 @@ export const Component = defineComponent({
|
|
|
const x = width * p[0];
|
|
|
const y = height * p[1];
|
|
|
index == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
|
|
- if (store.isEditMode) {
|
|
|
- ctx.fillStyle = "red"
|
|
|
- ctx.fillRect(x-10, y-10, 20, 20);
|
|
|
- }
|
|
|
})
|
|
|
|
|
|
if (data.value.isClose) {
|
|
@@ -158,6 +205,19 @@ export const Component = defineComponent({
|
|
|
ctx.fillStyle = bColor;
|
|
|
ctx.fill();
|
|
|
}
|
|
|
+
|
|
|
+ points.forEach((p, index)=>{
|
|
|
+ const x = width * p[0];
|
|
|
+ const y = height * p[1];
|
|
|
+
|
|
|
+ if (store.isEditMode && store.currCompId == props.compId) {
|
|
|
+ ctx.fillStyle = "red"
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(x, y, 5, 0, Math.PI*2);
|
|
|
+ ctx.fill();
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
return () => (
|