用canvas 旋转坐标系绘制图形和文本，文本是倒置的问题

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量726 收藏 11
点赞数 11
文章标签： 前端 canva可画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55896343/article/details/138181131
版权

我把canvas的坐标系，变换成了笛卡尔坐标系(直角坐标系)，但是变换之后，图形是对的，文字是倒着呢。图片 展示与代码展如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
  <script>
    const canvas = document.querySelector('#canvas');


    var ctx = canvas.getContext('2d');
    const data = JSON.parse(JSON.stringify({ "action": "submitResult", "data": { "flag": 1, "presetShape": { "points": [[2, 2], [5, 2]], "pointColor": "#FF0000", "sengmentColor": "#0000FF" }, "operation": [{ "type": "point", "point": [5, 5] }, { "type": "midpoint", "point": [5, 3.5], "text": 3 }, { "type": "midpoint", "point": [3.5, 2], "text": 3 }, { "type": "midpoint", "point": [3.5, 3.5], "text": 4.242640687119285 }], "widgetId": "exploreRelationshipBetweenPointsAndLines-123456" }, "time": 1713933866449 }));
    console.log(data);
    canvas.width = 400;
    canvas.height = 320;
    var squareSize = 20;
    ctx.setLineDash([5, 3]); // 设置虚线的样式，参数为实线长度和间隔长
    // 绘制横向虚线
    for (var i = 0; i <= 16; i++) {
      var y = i * squareSize;
      ctx.strokeStyle = "#cc7a7a";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(canvas.width, y);
      ctx.stroke();
    }

    // 绘制纵向虚线
    for (var j = 0; j <= 22; j++) {
      var x = j * squareSize;
      ctx.strokeStyle = "#cc7a7a";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      ctx.stroke();
    }
    ctx.setLineDash([]); // 设置为实线样式，参数为空数组
    ctx.strokeStyle = "#ff0000";
    ctx.beginPath();
    ctx.moveTo(140, 0);
    ctx.lineTo(140, canvas.height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, 200);
    ctx.lineTo(400, 200);
    ctx.stroke();
    ctx.save();

    ctx.translate(140, 200);
    ctx.scale(1, -1);
    ctx.fillStyle = '#d65c5c';
    const pointRaidus = 2;
    ctx.beginPath();
    ctx.arc(0, 0, pointRaidus, 0, 2 * Math.PI);
    ctx.fill();
    let pointColor = data.data.presetShape.pointColor;
    const sengmentColor = data.data.presetShape.sengmentColor;
    const points = data.data.presetShape.points;
    const operation = data.data.operation;

    ctx.setLineDash([]); // 设置为实线样式，参数为空数组
    ctx.strokeStyle = sengmentColor;
    ctx.lineWidth = 2
    ctx.beginPath();
    ctx.moveTo(points[0][0] * 20, points[0][1] * 20);
    ctx.lineTo(points[1][0] * 20, points[1][1] * 20);
    ctx.stroke();
    for (let i = 0; i < points.length; i++) {
      const element = points[i];
      console.log(element);
      ctx.fillStyle = pointColor;
      const pointRaidus = 3;
      ctx.beginPath();
      ctx.arc(element[0] * 20, element[1] * 20, pointRaidus, 0, 2 * Math.PI);
      ctx.fill();
    }
    for (let i = 0; i < operation.length; i++) {
      const element = operation[i];
      if (element.type == 'point') {
        ctx.strokeStyle = sengmentColor;
        ctx.lineWidth = 2
        ctx.beginPath();
        ctx.moveTo(element.point[0] * 20, element.point[1] * 20);
        ctx.lineTo(points[1][0] * 20, points[1][1] * 20);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(element.point[0] * 20, element.point[1] * 20);
        ctx.lineTo(points[0][0] * 20, points[0][1] * 20);
        ctx.stroke();
        console.log(element);
        const pointRaidus = 3;
        ctx.beginPath();
        ctx.arc(element.point[0] * 20, element.point[1] * 20, pointRaidus, 0, 2 * Math.PI);
        ctx.fill();
      }
      if (element.type == 'midpoint') {
        ctx.font = '10px Arial'; // 设置字体大小和字体样式
        ctx.fillStyle = 'black'; // 设置填充颜色
        const text = element.text.toFixed(2);
        ctx.fillText(text, element.point[0] * 20, element.point[1] * 20); // 在 (50, 50) 处填充文本
   
      }
    }

  </script>
</body>

</html>

解决这个问题的关键，就是 在平移和缩放之前，先保存一下前一个状态，

第一步

ctx.save()

当绘制文本之前 绘制平移旋转之前的状态，

第二步

ctx.restore()

然后重新计算坐标平移旋转缩放之后的位置，不计算直接绘制，文字不倒置了，但是文本显示的位置是错的，所以说我们重新计算 坐标的位置。

第三步

它接受参数包括文本内容、文本左下角的原始坐标、平移和缩放的偏移量，并返回在新坐标系中的文本位置：

function calculateTextPosition(text, originalX, originalY, translateX, translateY, scaleX, scaleY) {
    // 计算在新坐标系中的文本位置
    const newX = originalX * scaleX + translateX;
    const newY = originalY * scaleY + translateY;
    return { x: newX, y: newY };
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
  <script>
    const canvas = document.querySelector('#canvas');


    var ctx = canvas.getContext('2d');
    const data = JSON.parse(JSON.stringify({ "action": "submitResult", "data": { "flag": 1, "presetShape": { "points": [[2, 2], [5, 2]], "pointColor": "#FF0000", "sengmentColor": "#0000FF" }, "operation": [{ "type": "point", "point": [5, 5] }, { "type": "midpoint", "point": [5, 3.5], "text": 3 }, { "type": "midpoint", "point": [3.5, 2], "text": 3 }, { "type": "midpoint", "point": [3.5, 3.5], "text": 4.242640687119285 }], "widgetId": "exploreRelationshipBetweenPointsAndLines-123456" }, "time": 1713933866449 }));
    console.log(data);
    canvas.width = 400;
    canvas.height = 320;
    var squareSize = 20;
    ctx.setLineDash([5, 3]); // 设置虚线的样式，参数为实线长度和间隔长
    // 绘制横向虚线
    for (var i = 0; i <= 16; i++) {
      var y = i * squareSize;
      ctx.strokeStyle = "#cc7a7a";
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(canvas.width, y);
      ctx.stroke();
    }

    // 绘制纵向虚线
    for (var j = 0; j <= 22; j++) {
      var x = j * squareSize;
      ctx.strokeStyle = "#cc7a7a";
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
      ctx.stroke();
    }
    ctx.setLineDash([]); // 设置为实线样式，参数为空数组
    ctx.strokeStyle = "#ff0000";
    ctx.beginPath();
    ctx.moveTo(140, 0);
    ctx.lineTo(140, canvas.height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, 200);
    ctx.lineTo(400, 200);
    ctx.stroke();
    ctx.save();

    ctx.translate(140, 200);
    ctx.scale(1, -1);
    ctx.fillStyle = '#d65c5c';
    const pointRaidus = 2;
    ctx.beginPath();
    ctx.arc(0, 0, pointRaidus, 0, 2 * Math.PI);
    ctx.fill();
    let pointColor = data.data.presetShape.pointColor;
    const sengmentColor = data.data.presetShape.sengmentColor;
    const points = data.data.presetShape.points;
    const operation = data.data.operation;

    ctx.setLineDash([]); // 设置为实线样式，参数为空数组
    ctx.strokeStyle = sengmentColor;
    ctx.lineWidth = 2
    ctx.beginPath();
    ctx.moveTo(points[0][0] * 20, points[0][1] * 20);
    ctx.lineTo(points[1][0] * 20, points[1][1] * 20);
    ctx.stroke();
    for (let i = 0; i < points.length; i++) {
      const element = points[i];
      console.log(element);
      ctx.fillStyle = pointColor;
      const pointRaidus = 3;
      ctx.beginPath();
      ctx.arc(element[0] * 20, element[1] * 20, pointRaidus, 0, 2 * Math.PI);
      ctx.fill();
    }
    for (let i = 0; i < operation.length; i++) {
      const element = operation[i];
      if (element.type == 'point') {
        ctx.strokeStyle = sengmentColor;
        ctx.lineWidth = 2
        ctx.beginPath();
        ctx.moveTo(element.point[0] * 20, element.point[1] * 20);
        ctx.lineTo(points[1][0] * 20, points[1][1] * 20);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(element.point[0] * 20, element.point[1] * 20);
        ctx.lineTo(points[0][0] * 20, points[0][1] * 20);
        ctx.stroke();
        console.log(element);
        const pointRaidus = 3;
        ctx.beginPath();
        ctx.arc(element.point[0] * 20, element.point[1] * 20, pointRaidus, 0, 2 * Math.PI);
        ctx.fill();
      }
      ctx.restore();
      if (element.type == 'midpoint') {
        ctx.font = '10px Arial'; // 设置字体大小和字体样式
        ctx.fillStyle = 'black'; // 设置填充颜色
        // const text = element.text.toFixed(2);
        // ctx.fillText(text, element.point[0] * 20, element.point[1] * 20); // 在 (50, 50) 处填充文本
        const text = element.text.toFixed(2);
const textPosition = calculateTextPosition(text, element.point[0] * 20, element.point[1] * 20, 140, 200, 1, -1);
ctx.fillText(text, textPosition.x, textPosition.y);
     
      }
    }
    function calculateTextPosition(text, originalX, originalY, translateX, translateY, scaleX, scaleY) {
    // 计算在新坐标系中的文本位置
    const newX = originalX * scaleX + translateX;
    const newY = originalY * scaleY + translateY;
    return { x: newX, y: newY };
}
  </script>
</body>

</html>

如果能帮助到你，麻烦点个赞再走哈

棒5
关注
  • 11
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解canvas在圆弧周围绘制文本的两种写法
09-28
主要介绍了详解canvas在圆弧周围绘制文本的两种写法，直接按弧度进行编写的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android入门——利用Canvas完成绘制点、圆、直线、路径、椭圆、多边形等2D图形
最美不过，心中有梦，身旁有你！
10-07 1万+
引言一个成功的APP离不开优秀的UI，像墨迹天气等其他APP的一些精彩特效，仅仅依靠系统自带的UI组件是绝不可能实现。所以Android提供了另一种构造UI组件的方式——通过画布Canvas自己绘画，不夸张地说“只有想不到，没有做不到”配以各种动画效果就能实现。
Unity常见面试题型和日常问题总结，附有详解，强烈建议收藏（持续更新中）
qq_47926835的博客
02-28 4587
Unity2023最全最详细面试题（持续更新中）
arduino使用oled代码_实用！Arduino平台最强大的“显卡”驱动:Adafruit GFX 图形库8000字详细使用指南...
weixin_39996478的博客
11-21 2708
概述Arduino的Adafruit_GFX库为我们所有的LCD和OLED显示屏提供了通用语法和图形功能集。这使得Arduino示例程序可以很容易地在不同类型的显示屏之间进行调整，并且任何新特性、性能改进和错误修复都将立即应用于我们提供的完整的彩色显示。Adafruit_GFX库可以使用Arduino库管理器安装……这是首选的方式。在Arduino IDE“工具”菜单中，选择“管理库…”在搜索栏中...
JavaScript 编程精解 中文第三版 十七、在画布上绘图
热门推荐
龙哥盟
05-12 3万+
十七、在画布上绘图 原文：Drawing on Canvas 译者：飞龙 协议：CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解（第 2 版）》 绘图就是欺骗。 M.C. Escher，由 Bruno Ernst 在《The Magic Mirror of M.C. Escher》中引...
canvas绘制文本内容自动换行的实现代码
09-22
主要介绍了canvas绘制文本内容自动换行的实现代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js+html5实现canvas绘制镂空字体文本的方法
10-24
主要介绍了js+html5实现canvas绘制镂空字体文本的方法,涉及html5文字效果的相关技巧,需要的朋友可以参考下
HTML5 在canvas中绘制文本附效果图
09-28
主要介绍了HTML5 在canvas中如何绘制文本，有两种方法在canvas中绘制文本strokeText与fillText，可以根据需求选择
html5 canvas的绘制文本自动换行的示例代码
09-22
在使用 canvas 绘制某字符串的时候，我们可能想要让该字符串在某处按要求换行。那么应该如何实现，本文就来介绍一下，有兴趣的可以了解一下
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 167
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 682
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1131
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 277
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
综合性练习-验证码
cj13106811623的博客
05-15 828
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
前端-移动端布局
Kongfutu的博客
05-21 78
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 174
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 821
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 753
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
canvas绘制坐标系 从右下角为原点开始
06-13
可以通过以下步骤在canvas中绘制一个从右下角为原点开始的坐标系： 1. 获取canvas元素 ```javascript const canvas = document.getElementById('canvas'); ``` 2. 获取canvas的上下文对象 ```javascript const ctx ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值