MyPrint打印设计器（九）svg篇-圆

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

svg-圆

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

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

代码仓库

在线体验

代码仓库：github

代码仓库：gitee

实战项目：MyPrint

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

体验地址：前往

代码仓库：github

代码仓库：gitee

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

初始化图形

我们定义了一个freshSvg函数来初始化SVG图形。这个函数定义了一些基本的变量，如圆心坐标、半径、起始角度和结束角度等。

function freshSvg() {
    const x0 = 310,
        y0 = 130,
        x = 320,
        y = 320,
        radius = 100,
        startAngle = 0,
        endAngle = 2 * Math.PI - 1,
        moveto00 = false,
        anticlockwise = true;

    // ...
}

绘制圆弧

接下来，我们定义了一个draw函数，用于绘制圆弧。我们使用D3.js的path.arc方法，根据圆心、半径、起始角度和结束角度绘制圆弧。
const path = d3.path();
path.arc(x, y, radius, startAngle, endAngle, anticlockwise);

实现拖拽功能

我们实现了一个draggable函数，用于为圆弧图形添加拖拽功能。这个函数允许用户通过拖动控制点来动态调整圆弧的大小和位置。

function draggable(chart, points, labels, lines, draw, options) {
    // 实现拖拽逻辑
    update(chart, points, labels, lines, draw, options);

    d3.select(chart)
        .call(
            d3.drag()
                .on("start", event => { /* 处理拖拽开始 */ })
                .on("drag", event => { /* 处理拖拽进行中 */ })
                .on("end", () => { /* 处理拖拽结束 */ })
                .on("start.render drag.render end.render", () =>
                    update(chart, points, labels, lines, draw, options)
                )
        );
}

更新图形

最后，我们定义了一个update函数，用于在拖拽过程中更新图形的显示。这确保了当用户拖动控制点时，SVG图形会实时更新并反映变化。

function update(chart, points, labels, lines, draw, options) {
// 更新图形显示
}

完整实现

<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 path = d3.path();
    
    function freshSvg() {
        const x0 = 310,
                y0 = 130,
                x = 320,
                y = 320,
                radius = 100,
                startAngle = 0,
                endAngle = 2 * Math.PI - 1,
                moveto00 = false,
                anticlockwise = true;
        
        const points = [
                    [x + radius * Math.cos(startAngle), y + radius * Math.sin(startAngle)],
                    [+radius * Math.cos(endAngle), y + radius * Math.sin(endAngle)]
                ],
                labels = ["开始角度", ""],
                lines = [],
                draw = () => {
                    const startAngle = Math.atan2(points[0][1] - x, points[0][0] - y),
                            endAngle = 2 * Math.PI,
                            radius = Math.sqrt((points[0][1] - x) ** 2 + (points[0][0] - y) ** 2);
                    points[0][0] = x + radius * Math.cos(startAngle);
                    points[0][1] = x + radius * Math.sin(startAngle);
                    points[1][0] = x + radius * Math.cos(endAngle);
                    points[1][1] = x + radius * Math.sin(endAngle);
                    
                    const path = d3.path();
                    if (moveto00) path.moveTo(...points[2]);
                    path.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                    return path;
                };
        
        if (moveto00) {
            points.push([x0, y0]);
            labels.push("⟨x0, y0⟩");
        }
        
        draggable(chartElement, points, labels, lines, draw);
    }
    
    freshSvg()
    
    function update(chart, points, labels, lines, draw, options) {
        d3.select(chart)
                .select(".u-path")
                .style("stroke", "orange")
                .style("fill", options ? (options.fill ? options.fill : "none") : "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, options) {
        update(chart, points, labels, lines, draw, options);
        
        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, options)
                                )
                );
    }

</script>
</html>
那叫一个优雅
关注
  • 8
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MyPrint.rar_打印编程_Visual_C++_
08-12
本资源，"MyPrint.rar"，是一个关于使用Visual C++进行打印编程的例子，旨在帮助开发者理解和实现图像打印功能。让我们深入探讨一下这个主题。 首先，`Visual C++`是微软开发的一款强大的集成开发环境（IDE），它...
Ricoh myPrint-crx插件
04-02
使用Ricoh myPrint IPPS打印机扩展程序从Chrome桌面浏览器或Chromebook打印关于此扩展程序为您的Chrome桌面浏览器或Chromebook设备带来打印功能。 如果您所在的组织已经安装了myPrint，只需将扩展程序添加到Chrome...
js print打印网页指定区域内容的简单实例
10-21
在Web开发中，有时我们需要实现一个功能，让用户能够打印网页中的特定区域，而不是整个页面。这个需求可以通过JavaScript的`print`方法来实现。本文将详细介绍如何使用JavaScript来打印网页指定区域的内容，并提供一...
JavaScript打印网页指定区域的例子
10-26
在网页设计和内容展示中，经常会遇到需要打印特定内容的需求，例如打印一张发票、一个表格或某个页面上的特定部分。传统的网页打印方法通常会打印整个页面的内容，但有时候只需要打印页面的一部分，这就需要借助...
词法分析器-测试文档1
08-08
词法分析器是编译器或解释器的第一步，它负责将源代码转换成一系列有意义的标记（tokens），这些标记代表编程语言中的基本元素，如关键字、标识符、常量、运算符等。在这个测试文档中，我们关注的是词法分析程序如何...
PHP实现按之字形顺序打印二叉树的方法
10-18
function MyPrint($pRoot){ // 如果根节点为空，返回空数组 if($pRoot == NULL) { return []; } // 初始化当前层和下一层的栈 $current = 0; $next = 1; // 创建两个栈 $stack[0] = array(); $stack[1...
MyPrint.zip
06-12
本篇文章将深入探讨如何利用VB.NET来实现一个自定义的打印插件，以满足特定的打印需求。 首先，我们需要理解VB.NET中的打印基础。在VB.NET中，打印功能主要依赖于`System.Drawing.Printing`命名空间，其中包含了一...
myPrint.rar
08-09
在Android平台上实现无线WiFi打印机连接并打印PDF文档是一项常见的需求，尤其在移动办公环境中显得尤为重要。这个名为"myPrint.rar"的压缩包可能包含了实现这一功能的相关代码、配置文件或教程。下面我们将深入探讨...
c#简单的打印源码，打印页面设置
07-07
在`MyPrint`源码中，开发者可能使用了`PrintDocument`的`PrintPage`事件来定义打印的内容。当触发这个事件时，会调用用户自定义的处理程序，例如： ```csharp private void printDocument1_PrintPage(object sender...
页面实现预览和打印(页面整体打印和局部打印)
12-20
在网页开发中，预览和打印...通过合理的设计和代码组织，开发者可以为用户提供便捷且灵活的打印体验。在实际项目中，根据需求可以选择合适的实现策略，确保预览和打印功能既满足用户体验，又能有效利用现有的技术栈。
使用MFC编写打印程序
04-12
MFC框架为Windows应用程序开发提供了强大的工具集，尤其是在打印功能的实现上，通过文档视图框架和一系列可定制的函数，大大简化了打印程序的设计和编码过程。无论是对于初学者还是经验丰富的开发者，掌握MFC的打印...
JAVA的Web打印方式（PageOffice、POI、jacob，html打印等）
05-09
JAVA的Web打印方式详解 JAVA的Web打印方式是指在Web应用程序中实现打印功能的各种方法和技术。本文将主要介绍使用PageOffice、POI、jacob、html打印等方式来实现Web打印。 一、使用浏览器自带的打印功能直接打印 ...
程序打印九九乘法表cmd
08-18
它是在C语言的基础上添加了类、模板、异常处理等面向对象的特性，使得程序设计更加灵活高效。C++语言因其强大的功能和广泛的适用性，在工业界得到了广泛的应用，特别是在系统软件、游戏开发、高性能服务器等领域。 ...
使用MFC编写打印程序.pdf
04-05
例如，可以创建一个ID_MYPRINT命令，然后在`CView::OnFilePrint`函数中替换原有的ID_FILE_PRINT，以实现自定义的打印行为。 总结来说，使用MFC编写打印程序提供了便利性和灵活性，能够根据用户需求轻松定制打印格式...
C#标签打印程序源码
12-28
在本文中，我们将深入探讨如何使用C#编程语言开发一个标签打印程序，该程序能够从Excel文档中读取数据，并根据用户的自定义设置进行格式化、分页和打印预览。我们将围绕标题“C#标签打印程序源码”以及描述中的关键...
VC实现的截取当前窗口并打印
08-13
4. `MyPrint.cpp` 和 `MyPrint.h`: 主要类`MyPrint`的实现和声明，通常处理打印操作。 5. `StdAfx.cpp` 和 `StdAfx.h`: 包含预编译头文件，用于提高编译速度，包含常用库的引用。 6. `MyPrint.dsp` 和 `MyPrint.dsw`...
WEB中实现打印预览
06-25
### WEB中实现打印预览 在现代Web开发中，实现网页内容的打印预览功能是一项常见且实用的需求。用户往往需要将网页上的某些内容（如报告、发票等）以特定格式打印出来，这就要求开发者能够提供一个良好的打印预览...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 388
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
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、付费专栏及课程。

余额充值