需求提出

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

实现思路：

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 imagectx.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();}};}