MyPrint打印设计器（八）svg篇-三阶贝塞尔曲线

已于 2024-10-01 22:43:53 修改
阅读量553 收藏 16
点赞数 27
分类专栏： Myprint 可视化打印设计器 文章标签： javascript d3 MyPrint 打印设计器
于 2024-09-04 16:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37614259/article/details/141831071
版权

svg-三阶贝塞尔曲线

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

本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的三次贝塞尔曲线

代码仓库

在线体验

代码仓库：github

代码仓库：gitee

实战项目：MyPrint

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

体验地址：前往

代码仓库：github

代码仓库：gitee

demo 效果

在这里插入图片描述

实战项目效果

在这里插入图片描述

正文

基础HTML结构

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

<!DOCTYPE html>
<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"/>
        <line class="u-line"/>
        <line class="u-line"/>
    </svg>
</div>
</body>
</html>

在这个HTML结构中，<svg>元素用于承载我们即将绘制的二次贝塞尔曲线和相关的辅助线。id=“chartRef” 使我们能够在JavaScript中轻松获取到这个元素。

定义初始点和绘制曲线

接下来，我们通过 JavaScript 和 D3.js 来绘制贝塞尔曲线。首先定义起点、终点和两个控制点的坐标：

const chartElement = document.getElementById('chartRef')
const x0 = 100,
    y0 = 300,
    cpx1 = 250,
    cpy1 = 400,
    cpx2 = 400,
    cpy2 = 100,
    x = 600,
    y = 300;

然后，我们使用 d3.path() 来定义路径，并绘制贝塞尔曲线：

function freshSvg() {
    const path = d3.path();
    path.moveTo(x0, y0);
    path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);

    const points = [[x0, y0], [cpx1, cpy1], [cpx2, cpy2], [x, y]],
        labels = ["开始", "控制点1", "控制点2", "结束"],
        lines = [[points[0], points[1]], [points[2], points[3]]],
        draw = () => {
            const path = d3.path();
            path.moveTo(...points[0]);
            path.bezierCurveTo(...points[1], ...points[2], ...points[3]);
            return path;
        };

    draggable(chartElement, points, labels, lines, draw);
}

freshSvg();

可拖拽的实现

为了使这条曲线更加动态，我们通过 draggable 函数将曲线的控制点、起点和终点设置为可拖拽的。这意味着用户可以拖动这些点，实时改变贝塞尔曲线的形状。

function draggable(chartElement, points, labels, lines, draw) {
    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)
                )
        );
}

draggable 函数的实现需要处理鼠标或触摸事件，在用户拖拽时动态更新曲线。这部分代码较为复杂，但其核心思想是监听并更新各个点的坐标，然后重新绘制曲线。

更新曲线和辅助线

每次用户拖拽控制点时，我们都需要更新曲线和辅助线。这是通过 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 = 300,
            cpx1 = 250,
            cpy1 = 400,
            cpx2 = 400,
            cpy2 = 100,
            x = 600,
            y = 300;
    
    function freshSvg() {
        const path = d3.path();
        path.moveTo(x0, y0);
        path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);
        
        // 控制点
        const points = [[x0, y0], [cpx1, cpy1], [cpx2, cpy2], [x, y]],
                // 标题
                labels = ["开始", "控制点1", "控制点2", "结束"],
                // 辅助线
                lines = [[points[0], points[1]], [points[2], points[3]]],
                // 绘制方法
                draw = () => {
                    const path = d3.path();
                    path.moveTo(...points[0]);
                    path.bezierCurveTo(...points[1], ...points[2], ...points[3]);
                    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>
那叫一个优雅
关注
专栏目录
yocto系列讲解[实战篇]94 - 添加libhybris库和测试示例
fulinux的博客
06-22 254
yocto系列讲解[实战篇]94 - 添加libhybris库和测试示例
SVG虚拟打印机开发
07-02
教会你如何编写一个打印机驱动,这是花了2元从维普咨询上下载的.<br>有什么不懂可以问在下
MyPrint打印设计器（七）svg篇-二阶贝塞尔曲线
css
09-04 1085
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的二次贝塞尔曲线首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 在这个HTML结构中，元素用于承载我们即将绘制的二次贝塞尔曲线和相关的辅助线。id=“chartRef” 使我们能够在JavaScript中轻松获取到这个元素。接下来，我们定义二次贝塞尔曲线的起点、终点和控制点，并绘制曲线。 在 freshSvg 函数中，首先定义了起点 (x0, y0)、
MyPrint打印设计器（五）vueuse/core 助你一臂之力
css
09-03 452
VueUse 是一个基于 Vue 3 的实用工具库，专门为 Vue 3 应用程序提供一系列经过优化和高度可组合的工具函数。 VueUse 提供了许多实用的组合式 API， 帮助开发者更轻松地管理状态、处理副作用、与 DOM 交互、处理时间和日期等常见任务。本文将介绍一些常用示例，以及一些有趣的功能
MyPrint打印设计器（六）svg篇-直线
css
09-03 631
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的直线首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 初始化SVG和绘制直线 我们使用D3.js的d3.path()方法来创建一条直线，并将其绘制到SVG中。起始点和终点的坐标分别为和。 实现拖拽功能 为了让直线的起点和终点可以被拖动，我们需要使用D3.js的拖拽交互模块d3.drag()。通过计算拖拽距离，我们可以实时更新直线的位置： 更新SVG内容
MyPrint打印设计器（九）svg篇-圆
css
09-05 567
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的圆首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 初始化图形 我们定义了一个freshSvg函数来初始化SVG图形。这个函数定义了一些基本的变量，如圆心坐标、半径、起始角度和结束角度等。 绘制圆弧 接下来，我们定义了一个draw函数，用于绘制圆弧。我们使用D3.js的path.arc方法，根据圆心、半径、起始角度和结束角度绘制圆弧。 const pa
Ricoh myPrint-crx插件
04-02
使用Ricoh myPrint IPPS打印机扩展程序从Chrome桌面浏览器或Chromebook打印关于此扩展程序为您的Chrome桌面浏览器或Chromebook设备带来打印功能。 如果您所在的组织已经安装了myPrint，只需将扩展程序添加到Chrome...
vue-print-nb实现页面打印
xin_666的博客
02-11 3519
1、安装及配置 安装依赖：npm install vue-print-nb --save 在main.js中引入
MyPrint打印设计器（十）svg篇-多边形
最新发布
css
09-05 629
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的多边形首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 绘制 SVG 矩形 接下来，我们使用 D3.js 创建一个简单的矩形，并通过 JavaScript 函数 freshSvg 进行渲染。代码如下： 这里，我们定义了矩形的四个顶点，并通过 d3.path() 方法绘制了这个矩形。为了让用户可以拖动矩形的顶点，我们使用 D3.js 的 drag 功能，
导出打印嵌套svg网页
02-25
将网页转换为canvas，包括含有svg的网页，完美解决了网页导出png图片的问题。另外附加了打印网页的适配A4纸的解决方案。
MyPrint打印设计器（一）js 键盘监听 组合键/快捷键
css
08-23 936
今天分享如何快速实现js快捷键监听 所需环境： 浏览器 js 实现目标 mac/win兼容，一套代码，多个平台 支持快捷键监听/单按键监听 事件是否冒泡可设置 使用方式简单 快速挂载与卸载 4行代码实现组合键监听 代码原理 把键盘监听事件挂载在document上，当键盘事件发生时，依次匹配事先订阅的快捷键/单按键事件， 如果有匹配到对应的订阅，则进行事件回调，并且停止键盘事件的回调。按下的按键进行转换，把mac/win的键盘差异进行了兼容 实现效果
打印设计器-MyPrint
css
09-05 1602
操作简单，组件丰富的一站式打印解决方案打印设计器
SVG
杞櫹椅桐的专栏
09-19 1237
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
html2canvas中如何打印svg
编程之路
12-20 2067
普通的svg打印 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>xy2</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jque...
如何使用 CSS 为 SVG 制作动画：示例教程
分享身边生活经验blog
09-25 3876
​小小播放器(xiaotv.cc)，免费追剧神器支持双端，影视资源极速解析！8 分钟阅读编者注：本文最后更新于 2022 年 7 月 12 日，以包含更多示例。Web 动画是一种乐趣，它通过提供视觉反馈、引导用户完成任务以及使网站整体变得活跃来改善用户体验。有几种方法可以创建网络动画，包括使用 JavaScript 库、GIF、嵌入式视频和 CSS。与庞大的 gif 和视频相比，使用 SVG 和 CSS 添加到网站的动画具有更快的加载时间。
十分钟教你用 svg 做出精美的动画！
ur home
07-15 1560
以下文章来源于前端进阶之路，作者三余 前言 经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。 但其实不然，今天教大家一个简单的小技巧，让你快速实现一个svg动画！ 打开Codepen，点击界面中的build按钮，就可以使用动画构建一个房子，并且让它升起寥寥炊烟！???? codepen(https://codepen.io/johnYu243/pen/bGBVEwv)
SVG动画——缩放、旋转、路径动画
执笔丶画苍生的博客
07-18 2955
SVG动画——缩放、旋转、路径动画
vue-print-nb设置打印边距为无
11-10
可以通过在`extraCss`中添加CSS样式来设置打印边距为无。具体操作如下： ```javascript print: { id: 'myPrint', popTitle: '付款审核表', extraHead: '', extraCss: ` @page { margin: 0; } @media print { body { margin: 0; } } `, }, ``` 在`extraCss`中添加`@page`和`@media print`两个样式，分别用于设置页面边距和打印时的边距。其中`margin: 0`表示将边距设置为0。这样就可以将打印边距设置为无了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值