在线绘图小工具

在线绘图小工具

    • 文章说明
    • 程序源码
    • 功能展示
    • 源码下载

文章说明

本文主要是在看了袁老师的canvas绘图小视频后所写，记录一个简单的canvas绘图功能，并学习一下较为传统的JavaScript事件写法，同时了解一下拖拽事件的更合理写法，等待后续将头像上传功能进行优化。

参考教程

程序源码

主要为核心的绘图类Shape.js，以及页面和事件，在App.vue里面

Shape.js

export class Shape {constructor(color, startX, startY, dpr) {this.endX = this.startX;this.endY = this.startY;this.color = color;this.startX = startX;this.startY = startY;this.dpr = dpr;}get minX() {return Math.min(this.startX, this.endX);}get maxX() {return Math.max(this.startX, this.endX);}get minY() {return Math.min(this.startY, this.endY);}get maxY() {return Math.max(this.startY, this.endY);}draw(ctx) {ctx.fillStyle = this.color;ctx.fill();ctx.strokeStyle = "#fff";ctx.lineWidth = 3 * this.dpr;ctx.lineCap = "square";ctx.stroke();}drawDashed(ctx) {ctx.strokeStyle = "#fff";ctx.lineWidth = 1 * this.dpr;ctx.lineCap = "square";ctx.stroke();}inSide(x, y) {return (this.minX <= x && this.maxX >= x) && (this.minY <= y && this.maxY >= y);}// 上1、下2、左4、右8// 得到上1、下2、左4、左上5、左下6、右8、右上9、右下10inGap(gap, x, y) {let result = 0;if (Math.abs(this.minY - y) <= gap && (this.minX - gap <= x && this.maxX + gap >= x)) {result += 1;}if (Math.abs(this.maxY - y) <= gap && (this.minX - gap <= x && this.maxX + gap >= x)) {result += 2;}if (Math.abs(this.minX - x) <= gap && (this.minY - gap <= y && this.maxY + gap >= y)) {result += 4;}if (Math.abs(this.maxX - x) <= gap && (this.minY - gap <= y && this.maxY + gap >= y)) {result += 8;}return result;}mouseMoveCreate(e, rect) {const clickX = e.clientX - rect.left;const clickY = e.clientY - rect.top;this.endX = clickX;this.endY = clickY;this.startX = this.minX;this.endX = this.maxX;this.startY = this.minY;this.endY = this.maxY;}mouseMoveChangePos(e, rect, startX, startY, endX, endY, clickX, clickY, canvas) {const disX = e.clientX - rect.left - clickX;const disY = e.clientY - rect.top - clickY;this.startX = startX + disX;this.startY = startY + disY;this.endX = endX + disX;this.endY = endY + disY;canvas.style.cursor = "move";}mouseMoveChangeSize(e, rect, startX, startY, endX, endY, clickX, clickY, inGap, canvas) {const disX = e.clientX - rect.left - clickX;const disY = e.clientY - rect.top - clickY;if (endX + disX < startX || endY + disY < startY || startX + disX > endX || startY + disY > endY) {return;}switch (inGap) {case 1:canvas.style.cursor = "n-resize";this.startY = startY + disY;break;case 2:canvas.style.cursor = "s-resize";this.endY = endY + disY;break;case 4:canvas.style.cursor = "w-resize";this.startX = startX + disX;break;case 5:canvas.style.cursor = "nw-resize";this.startX = startX + disX;this.startY = startY + disY;break;case 6:canvas.style.cursor = "sw-resize";this.startX = startX + disX;this.endY = endY + disY;break;case 8:canvas.style.cursor = "e-resize";this.endX = endX + disX;break;case 9:canvas.style.cursor = "ne-resize";this.endX = endX + disX;this.startY = startY + disY;break;case 10:canvas.style.cursor = "se-resize";this.endX = endX + disX;this.endY = endY + disY;break;default:canvas.style.cursor = "default";break;}}
}

简单实现了矩形和椭圆形的绘制相关功能

import {Shape} from "@/Shape";export class Rectangle extends Shape {constructor(color, startX, startY, dpr) {super(color, startX, startY, dpr);}draw(ctx) {ctx.beginPath();ctx.setLineDash([]);ctx.moveTo(this.minX, this.minY);ctx.lineTo(this.maxX, this.minY);ctx.lineTo(this.maxX, this.maxY);ctx.lineTo(this.minX, this.maxY);ctx.lineTo(this.minX, this.minY);super.draw(ctx);}
}

import {Shape} from "@/Shape";export class Circle extends Shape {constructor(color, startX, startY, dpr) {super(color, startX, startY, dpr);}draw(ctx) {ctx.beginPath();ctx.setLineDash([]);ctx.ellipse((this.maxX + this.minX) / 2,(this.maxY + this.minY) / 2,(this.maxX - this.minX) / 2,(this.maxY - this.minY) / 2,0, 0, Math.PI * 2);super.draw(ctx);ctx.beginPath();ctx.moveTo(this.minX, this.minY);ctx.setLineDash([1, 5]);ctx.lineTo(this.maxX, this.minY);ctx.lineTo(this.maxX, this.maxY);ctx.lineTo(this.minX, this.maxY);ctx.lineTo(this.minX, this.minY);super.drawDashed(ctx);}
}

App.vue

<script setup>
import {onMounted, reactive} from "vue";
import {Rectangle} from "@/Rectangle";
import {Circle} from "@/Circle";let canvas;
let rect;
let ctx;
let color;
let dpr;
let shapes = [];
let change = true;
let gap;function setCanvas() {canvas.width = 1000 * dpr;canvas.height = 500 * dpr;rect = canvas.getBoundingClientRect();
}function resizeShape(ratio) {for (let i = 0; i < shapes.length; i++) {shapes[i].startX *= ratio;shapes[i].startY *= ratio;shapes[i].endX *= ratio;shapes[i].endY *= ratio;}
}function draw() {if (change) {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < shapes.length; i++) {shapes[i].draw(ctx);}change = false;}requestAnimationFrame(draw);
}onMounted(() => {canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");color = document.getElementById("color");dpr = window.devicePixelRatio;gap = 10 * dpr;setCanvas(canvas);draw();window.onresize = () => {const oldRatio = dpr;dpr = window.devicePixelRatio;gap = 10 * dpr;setCanvas();resizeShape(dpr / oldRatio);change = true;draw();};window.onkeydown = (e) => {if (e.ctrlKey && e.code === "KeyZ") {shapes.pop();change = true;}}canvas.onmousedown = mouseDown;canvas.ondblclick = (e) => {const clickX = e.clientX - rect.left;const clickY = e.clientY - rect.top;let shape;for (let i = shapes.length - 1; i >= 0; i--) {if (shapes[i].inSide(clickX, clickY)) {shapes[i].color = color.value;shape = shapes[i];shapes.splice(i, 1);break;}}if (shape) {shapes.push(shape);}change = true;};canvas.onmousemove = (e) => {changeSize(e);};
});function changeSize(e) {const clickX = e.clientX - rect.left;const clickY = e.clientY - rect.top;for (let i = shapes.length - 1; i >= 0; i--) {const inGap = shapes[i].inGap(gap, clickX, clickY);const {startX, startY, endX, endY} = shapes[i];shapes[i].mouseMoveChangeSize(e, rect, startX, startY, endX, endY, clickX, clickY, inGap, canvas);if (inGap > 0) {break;}}
}function getShape(clickX, clickY) {for (let i = shapes.length - 1; i >= 0; i--) {const inGap = shapes[i].inGap(gap, clickX, clickY);if (inGap > 0) {return shapes[i];}if (shapes[i].inSide(clickX, clickY)) {return shapes[i];}}return null;
}function mouseDown(e) {const clickX = e.clientX - rect.left;const clickY = e.clientY - rect.top;let shape = getShape(clickX, clickY);if (!shape) {if (data.checkType === "矩形") {shape = new Rectangle(color.value, clickX, clickY, dpr);} else if (data.checkType === "椭圆形") {shape = new Circle(color.value, clickX, clickY, dpr);}shapes.push(shape);canvas.onmousemove = (e) => {shape.mouseMoveCreate(e, rect);change = true;};} else {const {startX, startY, endX, endY} = shape;const inGap = shape.inGap(gap, clickX, clickY);if (inGap > 0) {canvas.onmousemove = (e) => {shape.mouseMoveChangeSize(e, rect, startX, startY, endX, endY, clickX, clickY, inGap, canvas);change = true;};} else {canvas.onmousemove = (e) => {shape.mouseMoveChangePos(e, rect, startX, startY, endX, endY, clickX, clickY, canvas);change = true;};}}window.onmouseup = () => {canvas.onmousemove = null;canvas.onmousemove = (e) => {changeSize(e);};};
}const data = reactive({typeList: [{id: 1,name: "矩形",},{id: 2,name: "椭圆形",},],checkType: "矩形",
});function select(item) {data.checkType = item.name;
}
</script><template><div style="margin: 100px auto; display: flex; align-items: center; justify-content: center; flex-direction: column"><ul class="type"><li v-for="item in data.typeList" :key="item.id" :class="data.checkType === item.name ? 'selected' : ''"@click="select(item)">{{ item.name }}</li></ul><input id="color" style="margin-bottom: 20px" type="color"/><canvas id="canvas"></canvas></div>
</template><style>
* {padding: 0;margin: 0;box-sizing: border-box;
}.type {list-style: none;li {padding: 20px;float: left;&:hover {color: #ff0000aa;cursor: pointer;}}.selected {color: #ff0000;}
}#canvas {background-color: coral;
}
</style>

功能展示

绘制矩形和椭圆形
在这里插入图片描述

拖动矩形和椭圆形
在这里插入图片描述

放大缩小
在这里插入图片描述

双击切换颜色并让其在最上层
在这里插入图片描述

源码下载

在线绘图小工具

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/45001.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++相关概念和易错语法（18）（array、模板）

C++相关概念和易错语法（18）（array、模板）

1.array &#xff08;1&#xff09;普通数组的劣势 当我们直接越界修改值时&#xff0c;一般会在编译时就被拦截 但是越界访问&#xff0c;只要访问距离不算特别大&#xff0c;那么也可以越界访问 当我们不直接越界修改或访问&#xff0c;间接去访问和修改能越界非常远 这里的…
阅读更多...
翻牌器单独设置前后缀样式

翻牌器单独设置前后缀样式

翻牌器单独设置前后缀样式 <template><div :style"[fontStyle,styleBackGroundColor]"><!-- <span style"color: #1d1d1d"> {{optionData}}</span>--><!-- 设置前缀样式 --><span class"prefix" …
阅读更多...
怎么样的主食冻干算好冻干？品质卓越、安全可靠的主食冻干分享

怎么样的主食冻干算好冻干？品质卓越、安全可靠的主食冻干分享

当前主食冻干市场产品质量参差不齐。一些品牌过于追求营养数据的堆砌和利润的增长&#xff0c;却忽视了猫咪健康饮食的基本原则&#xff0c;导致市场上出现了以肉粉冒充鲜肉、修改产品日期等不诚信行为。更令人担忧的是&#xff0c;部分产品未经过严格的第三方质量检测便上市销…
阅读更多...
Hadoop的HA模式搭建

Hadoop的HA模式搭建

准备三台虚拟机 bigdata007&#xff0c;bigdata008&#xff0c;bigdata009 1.前置工作 1.修改虚拟机的IP地址和hostname 2.配置集群中的ip映射&#xff08;/etc/hosts&#xff09; 192.168.111.57 bigdata007 192.168.111.58 bigdata008 192.168.111.59 bigdata0093.关闭虚拟…
阅读更多...
武夷山细节决定成败抓质量求生存

武夷山细节决定成败抓质量求生存

在当今竞争激烈的市场环境中&#xff0c;细节决定成败&#xff0c;质量求生存的理念已成为企业发展的关键。蓝鹏测控科技有限公司&#xff0c;一家专业从事工业测量领域的高新技术企业&#xff0c;正是秉持这一理念&#xff0c;在工业测径仪领域取得了显著成就。 蓝鹏测控科技…
阅读更多...
pandas修改时间索引报错处理

pandas修改时间索引报错处理

import pandas as pd import numpy as np import osdfpd.DataFrame(index[a,b,c],data{序列:[1,2,3]}) df.rename(index{a:a1},inplaceTrue) print(df) print(df.index.dtype)df1pd.DataFrame(index[2024-01-01,2024-01-02,2024-01-03],data{序列:[1,2,3]}) df1.rename(index{2…
阅读更多...
Excel——REPLACE函数实现敏感信息打码

Excel——REPLACE函数实现敏感信息打码

第一步&#xff1a; 以素材Excel文档为例。 在F2单元格中输入函数“REPLACE(B2,4,5,"*****")”&#xff0c;输入完毕后&#xff0c;按Enter键开始计算&#xff0c;并使用填充柄对其他区域进行填充。 这个函数的意思是&#xff1a;从第4位数字开始的5个数字用5个“…
阅读更多...
医院门诊预约挂号小程序模板源码

医院门诊预约挂号小程序模板源码

医院门诊预约挂号小程序模板源码,主要有&#xff1a;绿色的医院住院办理&#xff0c;门诊预约挂号微信小程序页面模板。包含&#xff1a;办卡绑定、快速办理预约挂号、门诊缴费、住院服务、医院信息、个人中心、添加就诊人、找医生等等。 医院门诊预约挂号小程序模板源码
阅读更多...
Elasticsearch：使用 Filebeat 从 Node.js Web 应用程序提取日志

Elasticsearch：使用 Filebeat 从 Node.js Web 应用程序提取日志

本指南演示了如何从 Node.js Web 应用程序中提取日志并将其安全地传送到 Elasticsearch Service 部署中。你将设置 Filebeat 来监控具有标准 Elastic Common Schema (ECS) 格式字段的 JSON 结构日志文件&#xff0c;然后在向 Node.js 服务器发出请求时&#xff0c;你将在 Kiban…
阅读更多...
Doris安装部署

Doris安装部署

Doris安装部署 1、 MPP概念2.Doris简要介绍 1、 MPP概念 MPP (Massively Parallel Processing)&#xff0c;即大规模并行处理&#xff0c;在数据库非共享集群中&#xff0c;每个节点都有独立的磁盘存储系统和内存系统&#xff0c;业务数据根据数据库模型和应用特点划分到各个节…
阅读更多...
无人机之电池保养

无人机之电池保养

一、充电时 1、推荐使用官方充电器和充电管家 2、充电时确保电池处于关闭状态 3、冷却后再充电理想充电温度22-28度 二、使用时 1、首次使用需要充电唤醒电池 2、切勿将电池耗尽过放容易造成电池鼓包 三、储存时 1、存放在环境干燥通风的地方 2、不使用时每两个月充一…
阅读更多...
谷粒商城实战-25-分布式组件-SpringCloud Alibaba-Nacos配置中心-加载多配置集

谷粒商城实战-25-分布式组件-SpringCloud Alibaba-Nacos配置中心-加载多配置集

文章目录 一&#xff0c;拆分配置集二&#xff0c;配置文件中配置多配置集1&#xff0c;引用多配置集2&#xff0c;验证 三&#xff0c;多配置集总结1&#xff0c;使用场景2&#xff0c;优先级 这一节介绍如何加载多个配置集。 大多数情况下&#xff0c;我们把配置全部放在一个…
阅读更多...
C语言 结构体和共用体——对结构体的操作

C语言 结构体和共用体——对结构体的操作

目录 如何访问结构体的成员&#xff1f; 结构体变量的赋值操作 结构体变量的取地址值操作 如何访问结构体的成员&#xff1f; 结构体变量的赋值操作 结构体变量的取地址值操作
阅读更多...
如何为谷歌seo打好基础？

如何为谷歌seo打好基础？

选择获取一个合适的域名&#xff0c;选择一个好的域名是 SEO 成功的第一步。以下是一些建议&#xff1a; 域名名称&#xff1a;要短小易记&#xff0c;不要强行插入关键词。最好用你的公司名称&#xff0c;避免使用连字符或特殊字符。用户在输入一个复杂的域名时容易出错&…
阅读更多...
Ozon俄罗斯哪些产品热销中？Ozon7月市场热卖趋势放送

Ozon俄罗斯哪些产品热销中？Ozon7月市场热卖趋势放送

Ozon俄罗斯哪些产品热销工具&#xff1a;D。DDqbt。COm/74rD 据Ozon数据&#xff0c;2023年&#xff0c;在自提服务方面&#xff0c;Ozon投资了100亿扩展自提网络&#xff0c;自提点数量激增至超过5万个&#xff0c;是之前的2.6倍。 物流基础设施方面&#xff0c;Ozon在仓库建…
阅读更多...
树莓派4B_OpenCv学习笔记19：OpenCV舵机云台物体追踪

树莓派4B_OpenCv学习笔记19：OpenCV舵机云台物体追踪

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; Python 版本3.7.3&#xff1a; ​​ 今日学习&#xff1…
阅读更多...
【数据结构】排序——快速排序

【数据结构】排序——快速排序

前言 本篇博客我们继续介绍一种排序——快速排序&#xff0c;让我们看看快速排序是怎么实现的 &#x1f493; 个人主页&#xff1a;小张同学zkf ⏩ 文章专栏&#xff1a;数据结构 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 ​ 目录 …
阅读更多...
前端JS特效第30波：jquery图片列表按顺序分类排列图片组效果

前端JS特效第30波：jquery图片列表按顺序分类排列图片组效果

jquery图片列表按顺序分类排列图片组效果&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &…
阅读更多...
Profibus协议转Profinet协议网关模块连接智能电表通讯案例

Profibus协议转Profinet协议网关模块连接智能电表通讯案例

一、背景 在工业自动化领域&#xff0c;Profibus协议和Profinet协议是两种常见的工业通讯协议&#xff0c;而连接智能电表需要用到这两种协议之间的网关模块。本文将通过一个实际案例&#xff0c;详细介绍如何使用Profibus转Profinet模块&#xff08;XD-PNPBM20&#xff09;实…
阅读更多...
启航IT之旅：为新生绘制的学习路线图

启航IT之旅：为新生绘制的学习路线图

随着七月的热浪悄悄席卷而来&#xff0c;各地高考成绩陆续放榜&#xff0c;对于刚迈过高考这座独木桥的你们&#xff0c;这不仅仅是一个故事的终章&#xff0c;更是另一段冒险的序曲。特别是那些心中有一团IT火焰燃烧的少年们&#xff0c;暑假的钟声已经敲响&#xff0c;是时候…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023