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

最新推荐文章于 2024-09-04 16:00:00 发布
最新推荐文章于 2024-09-04 16:00:00 发布
阅读量792 收藏 19
点赞数 6
分类专栏： Myprint 可视化打印设计器 文章标签： javascript MyPrint 打印设计器 d3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37614259/article/details/141687649
版权

svg-二阶贝塞尔曲线

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

代码仓库

在线体验

代码仓库：github

代码仓库：gitee

实战项目：MyPrint

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

体验地址：前往

代码仓库：github

代码仓库：gitee

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

demo 效果

在这里插入图片描述

实战项目效果

在这里插入图片描述

正文

基础HTML结构

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

<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>
</html>

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

定义初始点和绘制曲线

接下来，我们定义二次贝塞尔曲线的起点、终点和控制点，并绘制曲线。

const chartElement = document.getElementById('chartRef')
const x0 = 100,
    y0 = 200,
    cpx = 350,
    cpy = 450,
    x = 600,
    y = 200;

function freshSvg() {
    const path = d3.path();
    path.moveTo(x0, y0);
    path.quadraticCurveTo(cpx, cpy, x, y);

    // 控制点
    const points = [[x0, y0], [cpx, cpy], [x, y]],
        // 标题
        labels = ["开始", "控制点", "结束"],
        // 辅助线
        lines = [[points[0], points[1]], [points[1], points[2]]],
        // 绘制方法
        draw = () => {
            const path = d3.path();
            path.moveTo(...points[0]);
            path.quadraticCurveTo(...points[1], ...points[2]);
            return path;
        };

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

freshSvg()

在 freshSvg 函数中，首先定义了起点 (x0, y0)、控制点 (cpx, cpy) 和终点 (x, y)，然后使用 d3.path() 创建一个路径对象，并通过 moveTo 和 quadraticCurveTo 方法来绘制曲线。

可拖拽的实现

为了使这条曲线更加动态，我们通过 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 函数的实现需要处理鼠标或触摸事件，在用户拖拽时动态更新曲线。这部分代码较为复杂，但其核心思想是监听并更新各个点的坐标，然后重新绘制曲线。

完整实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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,
            cpx = 350,
            cpy = 450,
            x = 600,
            y = 200;
    
    function freshSvg() {
        const path = d3.path();
        path.moveTo(x0, y0);
        path.quadraticCurveTo(cpx, cpy, x, y);
        
        // 控制点
        const points = [[x0, y0], [cpx, cpy], [x, y]],
                // 标题
                labels = ["开始", "控制点", "结束"],
                // 辅助线
                lines = [[points[0], points[1]], [points[1], points[2]]],
                // 绘制方法
                draw = () => {
                    const path = d3.path();
                    path.moveTo(...points[0]);
                    path.quadraticCurveTo(...points[1], ...points[2]);
                    return path;
                };
        
        draggable(chartElement, points, labels, lines, draw);
    }
    
    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")
                
                .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)
                                )
                );
    }
    
    
    freshSvg()

</script>
</html>
那叫一个优雅
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C-lodop打印控件 实现批量打印
qq_35804654的博客
08-13 8095
Lodop是什么？官网链接 有人说她是Web打印控件，因为她能打印、在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来； 有人说她是打印编程接口，因为她介于浏览器和打印设备之间，是个通道和桥梁，几乎能想到的打印控制事项都能做到； 有人说她是JavaScript的扩展，因为她所有功能就那么几个语句，和JS语法一样，一看就明白个究竟； 有人说她是报表打印工具，因为那个add_pr...
Ricoh myPrint-crx插件
04-02
使用Ricoh myPrint IPPS打印机扩展程序从Chrome桌面浏览器或Chromebook打印关于此扩展程序为您的Chrome桌面浏览器或Chromebook设备带来打印功能。 如果您所在的组织已经安装了myPrint，只需将扩展程序添加到Chrome...
MyPrint打印设计器（八）svg篇-三阶贝塞尔曲线
最新发布
css
09-04 208
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的三次贝塞尔曲线首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 在这个HTML结构中，元素用于承载我们即将绘制的二次贝塞尔曲线和相关的辅助线。id=“chartRef” 使我们能够在JavaScript中轻松获取到这个元素。接下来，我们通过 JavaScript 和 D3.js 来绘制贝塞尔曲线。首先定义起点、终点和两个控制点的坐标： 然后，我们使用
MyPrint打印设计器（六）svg篇-直线
css
09-03 518
介绍一款强大的svg操作库，能够通过简单的代码，实现svg绘制与操纵，实现拖拽等功能本文将通过一个简单的示例，介绍如何在SVG中绘制一条可拖拽的直线首先，我们需要在HTML中设置基本的SVG元素，以便绘制图形。 初始化SVG和绘制直线 我们使用D3.js的d3.path()方法来创建一条直线，并将其绘制到SVG中。起始点和终点的坐标分别为和。 实现拖拽功能 为了让直线的起点和终点可以被拖动，我们需要使用D3.js的拖拽交互模块d3.drag()。通过计算拖拽距离，我们可以实时更新直线的位置： 更新SVG内容
MyPrint打印设计器（四）vue3 函数式调用组件
css
08-27 535
vue中，通常情况下调用一个组件需要以下步骤templaterefrefref如果这个组件在template是不必要的，那么可以通过函数式调用组件，来省略在template标签中引入组件，来简化调用步骤，做到可以通过纯js调用组件这种方法也有一定的缺陷，因为在初始化的时候就已经确定了组件的DOM所在的层级，所以无法灵活的控制DOM元素的层级，所有一般在Message这种不关心组件DOM层级的组件中使用，以下是使用示例，
MyPrint打印设计器（二）vue3 实现历史步骤记录
css
08-23 530
通过vueuse中的 useManualRefHistory，快速实现历史操作记录。
MyPrint打印设计器（一）js 键盘监听 组合键/快捷键
css
08-23 918
今天分享如何快速实现js快捷键监听 所需环境： 浏览器 js 实现目标 mac/win兼容，一套代码，多个平台 支持快捷键监听/单按键监听 事件是否冒泡可设置 使用方式简单 快速挂载与卸载 4行代码实现组合键监听 代码原理 把键盘监听事件挂载在document上，当键盘事件发生时，依次匹配事先订阅的快捷键/单按键事件， 如果有匹配到对应的订阅，则进行事件回调，并且停止键盘事件的回调。按下的按键进行转换，把mac/win的键盘差异进行了兼容 实现效果
MyPrint打印设计器（三）设置整个条码宽度,让条形码填充整个div
css
08-27 584
让条形码填充整个div。
【Godot4.2】自定义富文本打印函数库 - myPrint
巽的博客
04-27 1198
Godot4.2提供方法，可以在输出栏打印包含BBCode的富文本。但是显然直接用BBCode写有点费劲，所以自然而然想到封装函数库。另外，输出栏也支持特殊字符输出，所以这也是一个字符的有为之地。另外还可以打印重复字符组成的分割线、表格等。可以拓展出方便好用的输出函数，让我们的输出更个性化。
vue-print-nb如何打印隐藏dom
shao.zq的博客
10-12 4100
问题描述 目前有一个tabs页面，每个里面是不同的表单，因为通过v-if实现的显隐控制，需求要求点击打印后将全部tabs的内容打印，每个tabs页面是一个独立的页。 功能实现 1.新建一个div将tabs全部渲染 2.通过隐藏实现div不可见 3.通过css控制每个tabs是一个单独的A4纸。 具体代码 HTML代码 <!-- 需要填写想要打印的id --> <button v-print="'#objectDialogPrintWarp'"></button>
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1282
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2447
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1350
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 920
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 462
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 926
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
Nginx部署前端Vue项目
不会代码的小林
09-03 516
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
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、付费专栏及课程。

余额充值