根据地图经纬度绘制 canvas 电子围栏【2】 前端

使用scale(1,-1),以y轴作为对称轴镜像反转, 就可得到著名的笛卡尔坐标系,左下角为原点

关尔先生2021-12-01 17:25:41
![笛卡尔坐标系.png](/img.php?20211201519078050950266c7b33fe1f66626198.png) 参考 [MDN Web Docs:缩放 Scaling ](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations) 使用 `translate(0,canvas.height); scale(1,-1); ` 以y轴作为对称轴镜像反转, 就可得到著名的 **笛卡尔坐标系** ,左下角为原点 因此,修改 [第一版的代码](https://www.nanshanqiao.com/zz_article/105.html) ,更改部分如下 ```javascript // y轴的偏移量不同 let xoffset = xMin * scale - canvasWidth / 3 / 2; let yoffset = yMax * scale - canvasHeight / 3 / 2 *5 ; //以y轴作为对称轴镜像反转, 就可得到著名的笛卡尔坐标系,左下角为原点 ctx.translate(-xoffset,canvasHeight+yoffset); // ctx.font = '14px Arial'; ctx.strokeText(`坐标原点:${xoffset / scale},${yoffset / scale}`,xoffset+14,-yoffset-14); ctx.scale(1,-1); //标记原点 //drawPoint(xoffset,yoffset); //放大坐标 area=area.map(obj=>{ return [obj.x*scale,obj.y*scale]; }) //画多边形 drawArea(area) //放大坐标 画点 points.forEach(obj => { drawPoint(obj.x*scale,obj.y*scale); }); ```

笛卡尔坐标系scale地图经纬度canvas电子围栏坐标放大

上一篇:根据地图经纬度绘制 canvas 电子围栏【1】

下一篇:js HtmlSpecialChars 函数把预定义的字符转换为 HTML 实体

本文链接: http://www.nanshanqiao.com/zz_article/106.html

暂无评论