MyPrint打印设计器（六）svg篇-直线

svg-二阶贝塞尔曲线

介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能

代码仓库

在线体验

代码仓库：github

代码仓库：gitee

实战项目：MyPrint

操作简单，组件丰富的一站式打印解决方案打印设计器

体验地址：前往

代码仓库：github

代码仓库：gitee

本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的直线

demo 效果

在这里插入图片描述

实战项目效果

在这里插入图片描述

正文

基础HTML结构

首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。

<html lang="en">
<head><meta charset="UTF-8"><title>MyPrint|打印设计|SVG|直线</title><script src="https://cdn.jsdelivr.net/npm/d3@7"></script><style>body {width: 100vw;height: 100vh;margin: 0;display: flex;justify-content: center;align-items: center;}.chart {width: 100%;height: 100%;overflow: visible;}.chart_wrapper {width: 700px;height: 700px;box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.1);border-radius: 10px;}</style>
</head>
<body>
<div class="chart_wrapper"><svg id="chartRef" class="chart"><path class="u-path" :d="path"/><line class="u-line"/><line class="u-line"/></svg>
</div>
</body>
</html>

初始化SVG和绘制直线

我们使用D3.js的d3.path()方法来创建一条直线，并将其绘制到SVG中。起始点和终点的坐标分别为[100, 200]和[600, 400]。

const chartElement = document.getElementById('chartRef')
const x0 = 100, y0 = 200, x = 600, y = 400;function freshSvg() {const path = d3.path();path.moveTo(x0, y0);path.lineTo(x, y);const points = [[x0, y0], [x, y]];const labels = ["开始", "结束"];const lines = [];const draw = () => {const path = d3.path();path.moveTo(...points[0]);path.lineTo(...points[1]);return path;};draggable(chartElement, points, labels, lines, draw);
}freshSvg()

实现拖拽功能

为了让直线的起点和终点可以被拖动，我们需要使用D3.js的拖拽交互模块d3.drag()。通过计算拖拽距离，我们可以实时更新直线的位置：

function draggable(chart, points, labels, lines, draw) {update(chart, points, labels, lines, draw);const dist = (p, m) => {return Math.sqrt((p[0] - m[0]) ** 2 + (p[1] - m[1]) ** 2);};var subject, dx, dy;function dragSubject(event) {const p = d3.pointer(event.sourceEvent, chart);subject = d3.least(points, (a, b) => dist(p, a) - dist(p, b));if (dist(p, subject) > 48) subject = null;if (subject)d3.select(chart).style("cursor", "hand").style("cursor", "grab");else d3.select(chart).style("cursor", null);return subject;}d3.select(chart).on("mousemove", event => dragSubject({sourceEvent: event})).call(d3.drag().subject(dragSubject).on("start", event => {if (subject) {d3.select(chart).style("cursor", "grabbing");dx = subject[0] - event.x;dy = subject[1] - event.y;}}).on("drag", event => {if (subject) {subject[0] = event.x + dx;subject[1] = event.y + dy;}}).on("end", () => {d3.select(chart).style("cursor", "grab");}).on("start.render drag.render end.render", () =>update(chart, points, labels, lines, draw)));
}

更新SVG内容

每次拖拽时，我们都需要更新SVG的内容，以反映新的直线位置。这通过update()函数实现，该函数更新路径、控制点和辅助线：

function update(chart, points, labels, lines, draw) {d3.select(chart).select(".u-path").style("stroke", "orange").style("fill", "none").attr("d", draw());d3.select(chart).selectAll(".u-point").style("stroke", "orange").style("fill", "orange").data(points).join(enter =>enter.append("g").classed("u-point", true).call(g => {g.append("circle").attr("r", 3);g.append("text").text((d, i) => labels[i]).attr("dy", d => (d[1] > 100 ? 15 : -5));})).attr("transform", d => `translate(${d})`);d3.select(chart).selectAll(".u-line").style("stroke", "#aaa").style("stroke-dasharray", "2 2").data(lines).join("line").attr("x1", d => d[0][0]).attr("y1", d => d[0][1]).attr("x2", d => d[1][0]).attr("y2", d => d[1][1]).classed("u-line", true);
}

完整实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyPrint|打印设计|SVG|直线</title><script src="https://cdn.jsdelivr.net/npm/d3@7"></script><script src="./d3-utils.js"></script><style>body {width: 100vw;height: 100vh;margin: 0;display: flex;justify-content: center;align-items: center;}.chart {width: 100%;height: 100%;overflow: visible;}.chart_wrapper {width: 700px;height: 700px;box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.1);border-radius: 10px;}</style>
</head><body>
<div class="chart_wrapper"><svg id="chartRef" class="chart"><path class="u-path" :d="path"/><line class="u-line"/><line class="u-line"/></svg>
</div>
</body><script>const chartElement = document.getElementById('chartRef')const x0 = 100,y0 = 200,x = 600,y = 400;function freshSvg() {const path = d3.path();path.moveTo(x0, y0);path.lineTo(x, y);// 控制点const points = [[x0, y0], [x, y]],// 标题labels = ["开始", "结束"],// 辅助线lines = [],// 绘制方法draw = () => {const path = d3.path();path.moveTo(...points[0]);path.lineTo(...points[1]);return path;};draggable(chartElement, points, labels, lines, draw);}freshSvg()function update(chart, points, labels, lines, draw) {d3.select(chart).select(".u-path").style("stroke", "orange").style("fill", "none").attr("d", draw());d3.select(chart).selectAll(".u-point").style("stroke", "orange").style("fill", "orange").data(points).join(enter =>enter.append("g").classed("u-point", true).call(g => {g.append("circle").attr("r", 3);g.append("text").text((d, i) => labels[i]).attr("dy", d => (d[1] > 100 ? 15 : -5));})).attr("transform", d => `translate(${d})`);d3.select(chart).selectAll(".u-line").style("stroke", "#aaa").style("stroke-dasharray", "2 2").data(lines).join("line").attr("x1", d => d[0][0]).attr("y1", d => d[0][1]).attr("x2", d => d[1][0]).attr("y2", d => d[1][1]).classed("u-line", true);}function draggable(chart, points, labels, lines, draw) {update(chart, points, labels, lines, draw);const dist = (p, m) => {return Math.sqrt((p[0] - m[0]) ** 2 + (p[1] - m[1]) ** 2);};var subject, dx, dy;function dragSubject(event) {const p = d3.pointer(event.sourceEvent, chart);subject = d3.least(points, (a, b) => dist(p, a) - dist(p, b));if (dist(p, subject) > 48) subject = null;if (subject)d3.select(chart).style("cursor", "hand").style("cursor", "grab");else d3.select(chart).style("cursor", null);return subject;}d3.select(chart).on("mousemove", event => dragSubject({sourceEvent: event})).call(d3.drag().subject(dragSubject).on("start", event => {if (subject) {d3.select(chart).style("cursor", "grabbing");dx = subject[0] - event.x;dy = subject[1] - event.y;}}).on("drag", event => {if (subject) {subject[0] = event.x + dx;subject[1] = event.y + dy;}}).on("end", () => {d3.select(chart).style("cursor", "grab");}).on("start.render drag.render end.render", () =>update(chart, points, labels, lines, draw)));}</script>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

notepad++将换行替换成空

notepad++将换行替换成空

将多行里的换行置为一行&#xff0c;例如将下面的6行置为3行 crrlH打开替换框&#xff0c; 替换目标为【,\r\n】&#xff0c;替换成空&#xff0c;勾选循环查找和 正则表达式&#xff0c;全部替换即可。 替换后的效果
阅读更多...
【AI】Pytorch_模型构建

【AI】Pytorch_模型构建

建议点赞收藏关注&#xff01;持续更新至pytorch大部分内容更完。 本文已达到10w字&#xff0c;故按模块拆开&#xff0c;详见目录导航。 整体框架如下 数据及预处理 模型及其构建 损失函数及优化器 本节目录 模型线性回归逻辑回归LeNetAlexNet 构建模块组织复杂网络初始化网络…
阅读更多...
中国各地级市的海拔标准差

中国各地级市的海拔标准差

海拔标准差是衡量地理测量准确性的重要指标&#xff0c;它通过计算特定地点的海拔测量值与平均海拔之间的偏差来评估数据的可靠性。较小的标准差意味着测量结果较为一致&#xff0c;而较大的标准差则可能指出数据的波动性或测量误差。 计算方法 海拔标准差的计算遵循以下公式…
阅读更多...
【pycharm-乱码】简单记录一下都有哪些涉及编码

【pycharm-乱码】简单记录一下都有哪些涉及编码

控制台 路径&#xff1a;setting-》general-》console setting-》editor-》file encodings 路径&#xff1a;setting-》editor->file and code templates #!/user/bin/env python3 # -*- coding: utf-8 -*-setting->tools->ssh terminal
阅读更多...
新款14 英寸和16英寸MacBook Pro开始组装生产

新款14 英寸和16英寸MacBook Pro开始组装生产

据 DigiTimes 报道&#xff0c;苹果的供应链已于 8 月开始批量生产搭载 M4 Pro 和 M4 Max 芯片的下一代 14 英寸和 16 英寸 MacBook Pro 机型。这意味着笔记本电脑的组装工作很可能已经开始。 此信息与显示行业分析师 Ross Young 的说法相符&#xff0c;他声称下一代 14 英寸和…
阅读更多...
Edge资源占用优化：调整浏览器设置与关闭自动更新检查

Edge资源占用优化：调整浏览器设置与关闭自动更新检查

最近&#xff0c;作者在学习过程中&#xff0c;打开任务管理器的时候注意到&#xff0c;即使没有打开浏览器&#xff0c;edge依然有着内存占用较高的情况&#xff1a; 于是就在网上收集了一些后台调优的方法&#xff0c;如果各位朋友有更多优化浏览器资源占用的方法&#xff0c…
阅读更多...
智能优化特征选择|基于鲸鱼WOA优化算法实现的特征选择研究Matlab程序（KNN分类器）

智能优化特征选择|基于鲸鱼WOA优化算法实现的特征选择研究Matlab程序（KNN分类器）

智能优化特征选择|基于鲸鱼WOA优化算法实现的特征选择研究Matlab程序&#xff08;KNN分类器&#xff09; 文章目录 一、基本原理原理流程举个例子总结 二、实验结果三、核心代码四、代码获取五、总结 智能优化特征选择|基于鲸鱼WOA优化算法实现的特征选择研究Matlab程序&#x…
阅读更多...
【Linux系统】线程的同步 生产消费模型

【Linux系统】线程的同步 生产消费模型

同步 同步概念 同步&#xff1a;在保证数据安全的前提下&#xff0c;让线程能够按照某种特定的顺序访问临界资源&#xff0c;从而有效避免饥饿问题&#xff0c;叫做同步 竞态条件&#xff1a;因为时序问题&#xff0c;而导致程序异常&#xff0c;我们称之为竞态条件。在线程场…
阅读更多...
[OpenCV] 数字图像处理 C++ 学习——13Canny边缘检测 附完整代码

[OpenCV] 数字图像处理 C++ 学习——13Canny边缘检测 附完整代码

文章目录 前言1.理论基础(1)高斯模糊平滑图像(GaussianBlur)(2)计算图像梯度(Sobel/Scharr)(3)非极大值抑制 (Non-maximum Suppression)(4)双阈值检测 (Double Threshold)(5)边缘跟踪&#xff08;通过滞后处理&#xff09; 2.代码实现3.完整代码 前言 Canny 边缘检测(高斯滤波…
阅读更多...
django学习入门系列之第十点《django中数据库操作--创建与删除表》

django学习入门系列之第十点《django中数据库操作--创建与删除表》

文章目录 django创建与删除表开始创建表创建指令新增表删除表删除列新增列修改报错提示语言总结 往期回顾 django创建与删除表 删除表 创建表 修改表 操作目录 开始创建表 class text_into(models.Model):name models.CharField(max_length32)password models.CharField…
阅读更多...
Electron快速上手

Electron快速上手

什么是Electron 一款应用广泛的跨平台的桌面应用开发框架。Electron的本质是结合了 Chromium 与Node.js。使用HTML、CSS、JS 等Web技术构建桌面应用程序。 .vue,.tsx,.less,.ts也可以使用 Electron 流程模型 主进程是纯node环境&#xff0c;可以访问__dirname,fs模块等&#…
阅读更多...
DDD设计方法-3-仓储，封装持久化数据

DDD设计方法-3-仓储，封装持久化数据

前情提要&#xff1a;一共包含 如下六篇文章&#xff08;篇幅精简&#xff0c;快速入门&#xff09; 1、初识DDD 2、聚合、实体、值对象 3、仓储&#xff0c;封装持久化数据 4、端口和适配器 5、领域事件 6、领域服务&#xff0c;实现约定 DDD设计方法-3-仓储&#xff0c;封装…
阅读更多...
绿联充电宝怎么样？深度测评西圣、绿联、倍思磁吸充电宝！

绿联充电宝怎么样？深度测评西圣、绿联、倍思磁吸充电宝！

在如今这个电子设备不离手的时代&#xff0c;充电宝成为了我们生活中不可或缺的伙伴。而磁吸充电宝以其便捷的使用方式和时尚的外观&#xff0c;更是受到了众多消费者的青睐&#xff0c;今天&#xff0c;我们将对西圣、绿联、倍思这三个品牌的磁吸充电宝进行深度测评&#xff0…
阅读更多...
Three之材质Material

Three之材质Material

本文目录 前言一、基础材质1.1 特点及属性1.2 代码1.3 效果 二、标准材质2.1 特点及属性2.2 代码及效果 三、深度材质四、法向材质五、朗伯材质六、Phong式材质七、粒子材质八、 着色器材质九、其他材质 前言 Three.js中的材质&#xff08;Material&#xff09;是独立于物体顶点…
阅读更多...
Anthropic Claude Artifacts，克劳德聊天机器人如何简化代码编程

Anthropic Claude Artifacts，克劳德聊天机器人如何简化代码编程

最近有一位8岁的小男孩&#xff0c;没有任何编程经验&#xff0c;却成功创建了一个网页游戏。他利用了Claude AI和Cursor来生成代码&#xff0c;这充分展示了人工智能在简化编程和创作过程中的巨大潜力。前几天还能看见一个8岁的女孩用生成式人工智能Cursor ai工具可以搭建出一…
阅读更多...
一款基于Vue的低代码可视化表单设计器工具，6K star的可视化表单设计器工具，轻松搞定表单，支持多端适配（附源码）

一款基于Vue的低代码可视化表单设计器工具，6K star的可视化表单设计器工具，轻松搞定表单，支持多端适配（附源码）

前言 随着Web应用的日益复杂化&#xff0c;表单的设计与开发成为了许多项目中不可或缺的一环。然而&#xff0c;在实际cao作过程中&#xff0c;表单设计往往面临着重复工作量大、效率低下等问题。那么&#xff0c;是否有一款工具能够简化这一过程&#xff0c;提高开发者的效率…
阅读更多...
【MySQL07】【锁】

【MySQL07】【锁】

文章目录 一、前言二、事务的读写情况1. 写-写情况2. 读-写情况3. 一致性读4. 锁定读2.1 共享锁和独占锁2.2 锁定读的语句 5. 写操作 三、多粒度锁四、表锁和行锁1. 表级锁1.1 表级别的 S锁 和 X锁1.2 表级别的 IS 锁和 IX锁1.3 表级别的 AUTO-INC 锁 2. 行级锁2.1 行级锁的分类…
阅读更多...
【流式输出】LangChain流式输出的概念

【流式输出】LangChain流式输出的概念

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript小贴士 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续…
阅读更多...
记一次头疼事故：springSecurity无法重定向到登录页/springSecurity整合layui后，会话丢失，点击选项卡无法定位到登录页。

记一次头疼事故：springSecurity无法重定向到登录页/springSecurity整合layui后，会话丢失，点击选项卡无法定位到登录页。

1、问题概述？ 1、springboot工程引入了springSecurity权限框架实现用户登录功能，当刷新浏览器地址栏的时候能够自动的重定向到登录页实现登录。 2、但是项目中使用了layui的选项卡，当会话丢失的时候(或者重启工程后直接访问)，选项卡无法回到登录页，而是选项卡中的数据表…
阅读更多...
yolo数据集钢材表面缺陷v8下载适用yolov5等全版本已标注txt格式

yolo数据集钢材表面缺陷v8下载适用yolov5等全版本已标注txt格式

钢材表面缺陷检测数据集介绍 数据集概述 本数据集专为钢材表面缺陷检测任务而设计&#xff0c;包含了大量的钢材表面图像&#xff0c;每张图像均带有详细的缺陷标注信息。数据集旨在帮助研究人员和开发人员训练高精度的目标检测模型&#xff0c;以应用于钢材制造和质量控制等多…
阅读更多...
最新文章

Copyright @ 2022~2023