|
@@ -10,7 +10,9 @@
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- <canvas id="myCanvas" width="2000000" height="1000000"> Canvas画正多边形 </canvas>
|
|
|
+ <canvas id="myCanvas" width="10000" height="10000">
|
|
|
+ Canvas画正多边形
|
|
|
+ </canvas>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -26,43 +28,24 @@ export default defineComponent({
|
|
|
allObj: allObj,
|
|
|
// canvas画图
|
|
|
initCanvas() {
|
|
|
- console.log(proxyData.allObj);
|
|
|
let canvasDom: any = document.querySelector("#myCanvas");
|
|
|
- // canvasDom.width = 400;
|
|
|
- // canvasDom.height = 400;
|
|
|
let ctx: any = canvasDom.getContext("2d");
|
|
|
let dots: any = proxyData.allObj.objArr;
|
|
|
console.log(proxyData.allObj.objArr);
|
|
|
for (let key in dots) {
|
|
|
let item = dots[key];
|
|
|
- // let item: any = [
|
|
|
- // { left: 20, top: 20 },
|
|
|
- // { left: 20, top: 60 },
|
|
|
- // { left: 60, top: 60 },
|
|
|
- // { left: 60, top: 20 }
|
|
|
- // ];
|
|
|
+ console.log(item);
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.fillStyle = "#cfefef";
|
|
|
- // ctx.strokeStyle = "transparent";
|
|
|
-
|
|
|
ctx.beginPath();
|
|
|
let circleArr: any = [];
|
|
|
for (let i = 0; i < item.length; i++) {
|
|
|
item[i].left = item[i].left;
|
|
|
item[i].top = item[i].top;
|
|
|
- console.log(item[i]);
|
|
|
if (item[i].type === "circle") {
|
|
|
circleArr.push(item[i]);
|
|
|
} else {
|
|
|
- // item[i].spaceName = ctx.lineTo(item[i].left, item[i].top);
|
|
|
- debugger;
|
|
|
-
|
|
|
if (!item[i].type) {
|
|
|
- // debugger;
|
|
|
- // if(i===0){
|
|
|
- // ctx.moveTo(item[i].left, item[i].top)
|
|
|
- // }
|
|
|
- console.log("===");
|
|
|
ctx.lineTo(item[i].left, item[i].top);
|
|
|
}
|
|
|
}
|
|
@@ -78,18 +61,18 @@ export default defineComponent({
|
|
|
circleArr[3].top
|
|
|
);
|
|
|
} else {
|
|
|
- // ctx.lineTo(item[0].left, item[0].top);
|
|
|
+ ctx.lineTo(item[0].left, item[0].top);
|
|
|
}
|
|
|
ctx.fill();
|
|
|
ctx.closePath();
|
|
|
ctx.strokeStyle = "red"; //填充边框颜色
|
|
|
ctx.stroke();
|
|
|
- canvasDom.addEventListener("click", function (e: any) {
|
|
|
- const canvasInfo = canvasDom.getBoundingClientRect();
|
|
|
- console.log(e);
|
|
|
- console.log(canvasInfo);
|
|
|
- console.log(ctx.isPointInPath(e.layerX, e.layerY));
|
|
|
- });
|
|
|
+ // canvasDom.addEventListener("click", function (e: any) {
|
|
|
+ // const canvasInfo = canvasDom.getBoundingClientRect();
|
|
|
+ // console.log(e);
|
|
|
+ // console.log(canvasInfo);
|
|
|
+ // console.log(ctx.isPointInPath(e.layerX, e.layerY));
|
|
|
+ // });
|
|
|
}
|
|
|
},
|
|
|
getFile(e: any) {
|
|
@@ -121,37 +104,18 @@ export default defineComponent({
|
|
|
let arr: any = result.split(/[(\r\n)\r\n]+/);
|
|
|
let p: any = localStorage.getItem("ponit");
|
|
|
let objArr: any = JSON.parse(p) || {};
|
|
|
- let pointArr: any = [];
|
|
|
+ let pointObj: any = {
|
|
|
+ spaceId: nameArr[0].toString(),
|
|
|
+ pointArr: [],
|
|
|
+ circularPoints: [],
|
|
|
+ logPointArr: [],
|
|
|
+ };
|
|
|
arr.map((item: any, index: any) => {
|
|
|
if (item) {
|
|
|
let itemArr: any = item.split(",");
|
|
|
- let obj: any = {
|
|
|
- left: parseInt(itemArr[0]),
|
|
|
- top: parseInt(itemArr[1]),
|
|
|
- };
|
|
|
- if (index < 3) {
|
|
|
- if (index === 0) {
|
|
|
- obj.type = "iconPoint";
|
|
|
- }
|
|
|
- if (index === 1) {
|
|
|
- obj.type = "textPoint";
|
|
|
- }
|
|
|
- if (index === 2) {
|
|
|
- obj.type = "logoPoint";
|
|
|
- }
|
|
|
- }
|
|
|
- if (nameArr[1]) {
|
|
|
- obj.type = "circle";
|
|
|
- }
|
|
|
- pointArr.push(obj);
|
|
|
}
|
|
|
});
|
|
|
- let nameStr: any = nameArr[0].toString();
|
|
|
- if (objArr[nameStr]) {
|
|
|
- objArr[nameStr].concat(pointArr);
|
|
|
- } else {
|
|
|
- objArr[nameStr] = pointArr;
|
|
|
- }
|
|
|
+
|
|
|
proxyData.allObj.objArr = objArr;
|
|
|
localStorage.setItem("ponit", JSON.stringify(proxyData.allObj.objArr));
|
|
|
proxyData.initCanvas();
|