需求提出

最近公司提出了一个电子报的需求，可看网上实现的思路基本上是方正系列的排版软件实现的，公司没必要买这么一套，于是按照自己的思路搞了一个手动版的电子报。学习了一下各大电子报的实现方案，有点简陋，但是实现了电子报的功能。且称他为电子报编辑器

实现思路：

1. 上传电子报PDF解析页面；
2. 手动在页面使用canvas划线标记框，双击选定区域弹出富文本编辑框；
3. 保存标记内容和坐标点到json文件；
4. 全部标记完成后生成html页面；
5. 读取json并使用canvas恢复标记，鼠标移动到标记框后半透明显示；
6. 点击选框区域弹出之间标记的内容；

技术路线

后端使用python，前端使用js+html

核心代码：

检测鼠标所在区域

// 判断点是否在多边形内（射线法）
        function isPointInPolygon(x, y, polygon) {
            let inside = false;
            for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
                const xi = polygon[i].x, yi = polygon[i].y;
                const xj = polygon[j].x, yj = polygon[j].y;
                const intersect = (yi > y) !== (yj > y) && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
                if (intersect) inside = !inside;
            }
            return inside;
        }

  // 画框在页面
        function draw() {
            let image = new Image();
            image.src = imagePaths[currentPage - 1];
            image.onload = function () {
                // Clear the canvas and redraw the image
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

                // Draw existing hotspot markings (red polygons)
                if (marks[currentPage]) {
                    marks[currentPage].forEach(polygon => {
                        ctx.strokeStyle = 'rgba(255, 0, 0, 0.7)';
                        ctx.lineWidth = 2;
                        ctx.beginPath();
                        ctx.moveTo(polygon[0].x, polygon[0].y);
                        polygon.forEach(point => ctx.lineTo(point.x, point.y));
                        ctx.closePath();
                        ctx.stroke();
                    });
                }

                // Draw current polygon being drawn (green)
                if (currentPolygon.length > 1) {
                    ctx.strokeStyle = 'rgba(0, 255, 0, 0.7)';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    ctx.moveTo(currentPolygon[0].x, currentPolygon[0].y);
                    currentPolygon.forEach(point => ctx.lineTo(point.x, point.y));
                    ctx.stroke();
                }
            };
        }