函数图像绘制小工具

最新推荐文章于 2024-10-01 20:12:28 发布
最新推荐文章于 2024-10-01 20:12:28 发布
阅读量1k 收藏 16
点赞数 9
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingbingyihao/article/details/141307035
版权

函数图像绘制小工具

文章说明

方便绘制一些数学的基础图象，制作该款小工具，不过尚为雏形阶段，等待后续逐步完善

核心代码

采用canvas绘图实现，核心代码如下

<script setup>
import {onMounted, reactive} from "vue";
import {ElMessage} from "element-plus";

const data = reactive({
  visible: false,
  xStart: "-10",
  xEnd: "10",
  expression: "y=x",
  point: {
    x: "",
    y: "",
  },
  tagPointList: [
    {
      id: 1,
      x: 0,
      y: 0,
    }
  ]
});

let canvas;
let context;
const xList = [];
const yList = [];
let width;
let height;

onMounted(() => {
  canvas = document.getElementsByClassName("canvas")[0];
  width = canvas.width;
  height = canvas.height;
  context = canvas.getContext("2d");
});

function clearCanvas() {
  context.clearRect(0, 0, width, height);
}

function draw() {
  if (!data.expression.startsWith("y=")) {
    ElMessage({
      message: "表达式应以y=开头",
      type: 'warning',
    });
    return;
  }

  xList.length = 0;
  for (let i = parseFloat(data.xStart); i <= parseFloat(data.xEnd); i += 0.1) {
    xList.push(parseFloat(i.toFixed(2)));
  }

  yList.length = 0;
  for (let i = 0; i < xList.length; i++) {
    const expression = data.expression.replace("y=", "").replaceAll("-x", "-1*x").replaceAll("x", "(" + xList[i] + ")");
    yList.push(parseFloat(eval(expression).toFixed(2)));
  }

  // 绘制基准线、X轴、Y轴
  context.beginPath();
  context.strokeStyle = 'black';
  context.moveTo(20, height / 2);
  context.lineTo(width - 20, height / 2);
  context.moveTo(width / 2, 20);
  context.lineTo(width / 2, height - 20);
  context.stroke();
  const originX = width / 2;
  const originY = height / 2;

  // 绘制刻度
  const xValueList = [];
  const yValueList = [];
  for (let i = -10; i <= 10; i++) {
    xValueList.push(i);
  }
  for (let i = -7; i <= 7; i++) {
    yValueList.push(i);
  }
  const defaultTagPointList = [];
  for (let i = 0; i < xValueList.length; i++) {
    for (let j = 0; j < yValueList.length; j++) {
      defaultTagPointList.push({
        x: xValueList[i],
        y: yValueList[j],
      });
    }
  }

  // 计算单位长度表示的x、y坐标的距离
  context.strokeStyle = 'red';
  const eachLengthX = width / xValueList.length - 1;
  const eachLengthY = height / yValueList.length - 1;
  drawXValue(xValueList, originX, originY, eachLengthX);
  drawYValue(yValueList, originX, originY, eachLengthY);
  context.stroke();

  // 绘制每个点及每条线
  context.strokeStyle = 'black';
  for (let i = 0; i < xList.length - 1; i++) {
    const pos = getPos(xList[i], yList[i], originX, originY, eachLengthX, eachLengthY);
    context.moveTo(pos[0], pos[1]);
    const nextPos = getPos(xList[i + 1], yList[i + 1], originX, originY, eachLengthX, eachLengthY);
    context.lineTo(nextPos[0], nextPos[1]);

    // 绘制默认点
    if (isDefaultTagPoint(defaultTagPointList, xList[i], yList[i])) {
      context.arc(pos[0], pos[1], 3, 0, 2 * Math.PI);
    }
    if (i + 1 === xList.length - 1) {
      if (isDefaultTagPoint(defaultTagPointList, xList[i + 1], yList[i + 1])) {
        context.arc(nextPos[0], nextPos[1], 3, 0, 2 * Math.PI);
      }
    }
  }

  context.stroke();
  context.closePath();
}

function isDefaultTagPoint(defaultTagPointList, x, y) {
  for (let i = 0; i < defaultTagPointList.length; i++) {
    if (defaultTagPointList[i].x === x && defaultTagPointList[i].y === y) {
      return true;
    }
  }
  return false;
}

function drawXValue(xValueList, originX, originY, eachLengthX) {
  for (let i = 0; i < xValueList.length; i++) {
    if (xValueList[i] > 0) {
      context.moveTo(xValueList[i] * eachLengthX + originX, originY);
      context.lineTo(xValueList[i] * eachLengthX + originX, originY - 5);
      context.fillText(xValueList[i], xValueList[i] * eachLengthX + originX - 3, originY - 10);
    } else if (xValueList[i] < 0) {
      context.moveTo(xValueList[i] * eachLengthX + originX, originY);
      context.lineTo(xValueList[i] * eachLengthX + originX, originY + 5);
      context.fillText(xValueList[i], xValueList[i] * eachLengthX + originX - 5, originY + 20);
    }
  }
}

function drawYValue(yValueList, originX, originY, eachLengthY) {
  for (let i = 0; i < yValueList.length; i++) {
    if (yValueList[i] > 0) {
      context.moveTo(originX, yValueList[i] * eachLengthY + originY);
      context.lineTo(originX + 5, yValueList[i] * eachLengthY + originY);
      context.fillText(-yValueList[i] + "", originX - 15, yValueList[i] * eachLengthY + originY + 3);
    } else if (yValueList[i] < 0) {
      context.moveTo(originX, yValueList[i] * eachLengthY + originY);
      context.lineTo(originX - 5, yValueList[i] * eachLengthY + originY);
      context.fillText(-yValueList[i] + "", originX + 5, yValueList[i] * eachLengthY + originY + 3);
    }
  }
}

function getPos(x, y, originX, originY, eachLengthX, eachLengthY) {
  const posX = parseFloat((x * eachLengthX + originX).toFixed(2));
  const posY = parseFloat((-y * eachLengthY + originY).toFixed(2));
  return [posX, posY];
}

function addPoint() {
  const x = parseFloat(data.point.x);
  const y = parseFloat(data.point.y);

  let flag = false;
  for (let i = 0; i < data.tagPointList.length; i++) {
    if (data.tagPointList[i].x === x && data.tagPointList[i].y === y) {
      flag = true;
      break;
    }
  }
  if (!flag) {
    ElMessage({
      message: "该点已被标注",
      type: 'warning',
    });
    return;
  }
  data.tagPointList.push({
    id: data.tagPointList.length + 1,
    x: x,
    y: y
  });
  draw();
}

function removeItem(row) {
  let flag = false;
  for (let i = 0; i < data.tagPointList.length; i++) {
    if (data.tagPointList[i].x === row.x && data.tagPointList[i].y === row.y) {
      flag = true;
      data.tagPointList.splice(i, 1);
      break;
    }
  }
  if (!flag) {
    ElMessage({
      message: "该点未被标注",
      type: 'warning',
    });
    return;
  }
  draw();
}
</script>

<template>
  <div class="container">
    <el-row style="justify-content: center">
      <el-input v-model="data.xStart" placeholder="x起始值" style="width: 110px"/>
      <el-input v-model="data.xEnd" placeholder="x结束值" style="width: 110px; margin-left: 20px"/>
      <el-input v-model="data.expression" placeholder="函数表达式" style="width: 240px; margin-left: 20px"/>
      <el-button style="margin-left: 20px" type="primary" @click="draw">绘图</el-button>
      <div style="position: absolute; right: 0">
        <el-button type="primary" @click="clearCanvas">清空绘图内容</el-button>
      </div>
    </el-row>
    <el-row style="justify-content: center; margin-top: 20px">
      <el-input placeholder="x" style="width: 240px"/>
      <el-input placeholder="y" style="width: 240px; margin-left: 20px"/>
      <el-button style="margin-left: 20px" type="primary" @click="addPoint">标点</el-button>
      <div style="position: absolute; right: 0">
        <el-button type="primary" @click="data.visible = true">查看标点信息</el-button>
      </div>
    </el-row>

    <canvas class="canvas" height="700" width="1000"></canvas>
  </div>

  <el-dialog v-model="data.visible" title="标点信息" width="80%">
    <el-table :data="data.tagPointList" border>
      <el-table-column align="center" label="编号" prop="id"/>
      <el-table-column align="center" label="X坐标" prop="x"/>
      <el-table-column align="center" label="Y坐标" prop="y"/>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="danger" @click="removeItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  margin: 50px auto;
  width: fit-content;
}

.canvas {
  margin-top: 50px;
  box-shadow: 0 0 20px 3px #88888888;
}
</style>

效果展示

y=x^3
在这里插入图片描述

y=x^2
在这里插入图片描述

y=1/x
在这里插入图片描述

y=2^x
在这里插入图片描述

源码下载

函数图像绘制小工具

bingbingyihao
关注
python二元函数图像在线绘制_使用python绘制二元函数图像的实例
weixin_39933356的博客
11-20 1539
使用python绘制二元函数图像的实例废话少说，直接上代码：#coding:utf-8import numpy as npimport matplotlib.pyplot as pltfrom mpl_toolkits.mplot3d import Axes3Ddef function_2(x,y):# 这里的函数可以任意定义return np.sum(x**2)fig = plt.figure...
一款实用的绘制函数图象的小工具
03-19
本文将深入探讨一款实用的绘制函数图象的小工具，它可以帮助用户直观地理解并分析各种数学函数。 首先，让我们了解什么是函数图像。函数图像通常是将一个变量与另一个变量之间的关系用图形表示出来，这种图形可以是...
常用的函数图像绘制工具（网站）
ZQL666123的博客
04-18 1万+
常用的数学函数绘制图像的工具（网站）
函数绘图工具
shoufei403的博客
08-28 4726
desmos是一个网页工具。通过它，我们可以方便地查看复杂函数的图形，绘制数据表，解方程和进行函数动态分析等等。
用计算机画函数图象的软件,自动画出函数图象的软件 真像函数图像绘制器
weixin_31874577的博客
06-24 3864
输入一个函数就给你自动画出函数图象的软件，1、动态调整函数位置、显示精度：当前大多数函数绘制软件不能够调整函数的位置和显示的精度，有的甚至只能绘制某个区间的图像(比如-10到10之间)，实际使用价值不大。至于计算和显示精度，严重关系到函数是否具有实际使用价值的关键。本软件使用即时演算技术，实时计算函数坐标位置，计算精度达到10-8。能够满足几乎所有普通用户的精度要求。函数图像的实时缩放功能(如下图...
Origin | 自定义函数图像绘制
热门推荐
简单光学
06-20 5万+
文章目录前言一、图像绘制二、图像调整 前言 我们常常会遇到一些函数，可利用Origin简单绘制出函数的曲线。 一、图像绘制 打开Origin软件；在上方工具栏点击绘图-函数图-新建2D函数图，此时弹出一个创建2D函数图的界面，如下动图所示： 我们在弹出的界面，输入自定义函数，如输入y=x2-6x，并将x坐标初步设置为0~10；如下动图所示： 我们需要特别注意，在Origin中乘号是用*表示的，如输入的函数有误，系统也会突出显示出来；若不作出相应地更改，点击确定之后，得不到函数曲线。 经过上述操作，我们
python二元函数图像在线绘制_Python之Numpy：二元函数绘制/三维数据可视化/3D
weixin_39844284的博客
11-20 1344
意义在机器学习任务中选择计算模型或者学习数学时，可视化有助于研究函数值的变化趋势（观察收敛、分布、几何形状等），带来直观的感受。源码# 绘制二元函数# 参考文献# + python画二元函数的图像（3D） https://blog.csdn.net/your_answer/article/details/79135076from mpl_toolkits.mplot3d import Axe...
| Origin绘图 | 函数图像的绘制
qq_58202678的博客
02-24 7409
近在学习神经网络，在了解了激活函数后在学长指导下用**Origin**和**Spyder**对各种激活函数图像进行了绘制，绘图之前也看了很多相关教程以及小tips,最后也是成功的完成绘制，下面就把用Origin绘图（特别是绘制复杂的自定义函数）的一些经验和步骤记录一下。
电脑绘制函数图像
weixin_45597589的博客
05-13 383
介绍几款电脑绘制函数图形的软件
怎样用计算机绘制幂函数图像,几何画板如何画幂函数的图像
weixin_35414475的博客
06-25 2384
在学习了一些基本初等函数后，会接触“幂函数”概念，其实幂函数并不是陌生的，之前学过的依次函数、二次函数和反比例函数都是幂函数，幂函数其实同指数函数、对数函数一样，都是函数中的一类特殊函数。利用几何画板探究幂函数的性质，可以克服黑板作图的不精确性，而且可以将函数直观化，从而利用数形结合思想来研究函数。那么如何用几何画板画幂函数呢？具体的绘制步骤如下：步骤一 建立坐标系。启动几何画板，依次单击“绘图”...
用计算机绘制函数图像ppt,ppt中怎么绘制三角函数图像?
weixin_36155936的博客
06-21 1036
ppt中怎么绘制三角函数图像?2018-03-16 20:22 责任编辑：砕月导读 /教学中我们最常用的莫过于ppt演示文稿了，除了基本的演示功能外，它也可以制作函数图像，如果利用ppt来制作函数的图像，不仅可以提高课堂效率，同时也可以增强课堂的实效性，更好地服务于教学活动，今天小编在这里就跟大家交流一下如何利用ppt制作函数图像，本经验仅供参考使用。1、首先启动PowerPoint 2003，执...
函数图象绘制工具
05-18
这时一款很小的函数图象绘制工具，有我和同学共同编写，作为c语言程序设计的课程作业
Graph 1.2_函数图像绘制_极坐标_C++_
10-03
至于压缩包中的"main.exe"，这很可能是程序的可执行文件，用户可以直接运行来体验这个函数图像绘制工具。"lib"文件夹可能包含了程序运行所需的库文件，这些库可能包含了图形渲染、数学计算和其他相关功能的实现。 ...
JAVA绘制简单函数图像工具
03-31
* 这是一个简单的函数显示工具，用户输入简单函数，程序自动画出函数图像，有着完整的注释，十分容易理解 * 支持常数e, sin, cos, tan, ln, ^, 加减乘除括号以及它们的复合运算 * 只能有一个变量，而且必须是x，...
JAVA绘制函数图像工具
06-26
在Java编程语言中，开发一个函数图像绘制工具是一项挑战性的任务，它涉及到图形用户界面（GUI）设计、数学计算以及图形渲染技术。这个"JAVA绘制函数图像工具"很可能是为了解决教育环境中教学与学习的需求，让学生或...
如何搭建Vue脚手架
w6437286的博客
09-26 485
本文主要讲解如何搭建vue脚手架。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 251
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
最新发布
2301_77012231的博客
10-01 212
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 467
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值