D3JS 实现画笔效果（svg）

已于 2024-04-11 09:37:14 修改
阅读量904 收藏 12
点赞数 27
分类专栏： D3可视化工具 文章标签： 前端 javascript vue.js 数据可视化
于 2024-04-11 00:12:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Turn_to_empty/article/details/137616199
版权
本文详细介绍了如何使用D3.js在SVG画布上创建一个可交互的绘图工具，包括创建SVG容器、添加背景、定义缩放和平移行为，以及通过mousedown、mousemove和mouseup事件实现画笔绘制和移动。
摘要由CSDN通过智能技术生成

目录

功能效果

效果图

实现逻辑

1、创建一个SVG容器：

2、创建一个主分组：

3、添加背景：

4、定义缩放和平移行为：

5、应用缩放和平移行为：

6、定义鼠标事件：

7、事件监听

完整代码

 D3.js绘图工具系列文章总提纲：【传送门】

功能效果

        通过按下鼠标左键开始绘制，移动鼠标更新路径坐标；通过画布的平移（按住滑轮）与缩放（滚动滑轮）不影响画笔的绘制效果。

效果图

实现逻辑

 通过修改 mousedown、mousemove与mouseup事件实现。

1、创建一个SVG容器：

使用d3.js创建一个SVG容器(h5代码中须有相关id标签)，用于呈现图表和图形；

let svg = reactive({});

// 生成画布的dom节点id为d3Canvas；须在html代码中添加
svg = d3
    .select('#d3Canvas')
    .append("svg")
    .attr("id", "svg")
    .attr("width", 500)
    .attr("height", 500)
    .attr("viewBox", "0 0 500 500");

2、创建一个主分组：

使用d3.js对所创建的SVG容器，添加一个g标签，用于控制整体缩放；不将事件直接绑定于svg上，是因为会出现bug：画面呈现出一闪一闪的，解决方案是将所有元素使用g标签进行包裹。

let g = reactive({});

g = svg.append("g").attr("id", "svg-grid");

3、添加背景：

用于让拖拽缩放效果更明显；

g.insert("rect", ":first-child")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "url(#grid)");

// 使用网格样式填充 SVG 元素背景
var pattern = svg.insert("defs", ":first-child")
    .append("pattern")
    .attr("id", "grid")
    .attr("width", 20)
    .attr("height", 20)
    .attr("patternUnits", "userSpaceOnUse");

// 添加网格线
pattern.append("path")
    .attr("d", "M 20 0 L 0 0 0 20")
    .attr("stroke", "lightgray")
    .attr("stroke-width", 0.5)
    .attr("fill", "none");

4、定义缩放和平移行为：

使用d3.zoom()函数创建一个缩放和平移行为，可以通过设置缩放比例和平移偏移量来控制缩放和平移的效果；

function zoomed(event, svg) {
    // 对g进行偏移赋值
    g.attr("transform", event.transform);
}
var zoom = d3
    .zoom()
    .scaleExtent([0.3, 10])
    .on("zoom", (event) => zoomed(event));

5、应用缩放和平移行为：

将缩放和平移行为应用到SVG容器上，使得图表可以响应鼠标事件。
注：阻止鼠标落下默认事件。

svg.call(zoom).on("mousedown.zoom", null);

6、定义鼠标事件：

参数定义：

let isPanning = false;
let startX = 0, startY = 0;

// 画笔状态
let isBrushDrawing = false;
// 路径
let pathData = '';
let currentPath = null;

定义坐标转换方法：

function getTransformedCoordinate(event) {
    // 获取鼠标当前位置的坐标
    const [x, y] = d3.pointer(event);
    // 获取画布当前的平移和缩放值
    const transform = d3.zoomTransform(g.node());
    // 应用平移和缩放转换，得到变换后的坐标
    const transformedX = (x - transform.x) / transform.k;
    const transformedY = (y - transform.y) / transform.k;
    return [transformedX, transformedY];
}

定义绘制/更新画笔路径方法

function updateBrushPath(x, y) {
    pathData += `${pathData ? ' L' : 'M'} ${x} ${y}`;
    if (currentPath) {
        currentPath.attr('d', pathData);
    } else {
        currentPath = g.append('path')
            .attr('id', 'path')
            .attr('d', pathData)
            .attr('stroke', 'red')
            .attr('fill', 'none')
            .attr('stroke-width', 2);
    }
}

平移鼠标落下事件(mousedown)：

function panMouseDown(event) {
    if (event.button !== 1) return; // 中键按下
    console.log('中键按下');
    isPanning = true;
    [startX, startY] = d3.pointer(event);
}

平移鼠标移动事件(mousemove)：

function panMouseMove(event) {
    if (isPanning) {
        event.preventDefault();
        const [x, y] = d3.pointer(event);
        const transform = d3.zoomTransform(g.node()); // 获取当前变换

        const transformedX = (x - startX) / transform.k;
        const transformedY = (y - startY) / transform.k;
        zoom.translateBy(g, transformedX, transformedY); // 使用偏移量进行平移
        startX = x; // 更新起始位置
        startY = y;
    }
}

 平移鼠标抬起事件(mouseup)：

function panMouseUp() {
    if (isPanning) {
        isPanning = false;
    }
}

画笔鼠标落下事件(mousedown)：

function brushMouseDown(event) {
    if (event.button !== 0) return; // 检查左键
    console.log('左键按下');
    isBrushDrawing = true;
    const [x, y] = getTransformedCoordinate(event);
    updateBrushPath(x, y);
}

画笔鼠标移动事件(mousemove)：

function brushMouseMove(event) {
    if (isBrushDrawing) {
        // 获取缩放及平移后的坐标
        const [x, y] = getTransformedCoordinate(event);
        updateBrushPath(x, y);
    }
}

画笔鼠标抬起事件(mouseup)：

function brushMouseUp(event) {
    if (isBrushDrawing) {
        isBrushDrawing = false;
        pathData = '';
        currentPath = null;
    }
}

7、事件监听

svg.on("mousedown", function (event) {
    panMouseDown(event);
    brushMouseDown(event);

    svg.on("mousemove", function (event) {
        panMouseMove(event);
        brushMouseMove(event);
    });
    svg.on("mouseup", function (event) {
        panMouseUp(event);
        brushMouseUp(event);

        svg.on("mousemove", function (event) {
            panMouseMove(event);
        });
        svg.on("mouseup", function (event) {
            panMouseUp(event);
        });
    });
});

完整代码

let svg = reactive({});

// 生成画布的dom节点id为d3Canvas；须在html代码中添加
svg = d3
    .select('#d3Canvas')
    .append("svg")
    .attr("id", "svg")
    .attr("width", 500)
    .attr("height", 500)
    .attr("viewBox", "0 0 500 500");

let g = reactive({});

g = svg.append("g").attr("id", "svg-grid");

g.insert("rect", ":first-child")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "url(#grid)");

// 使用网格样式填充 SVG 元素背景
var pattern = svg.insert("defs", ":first-child")
    .append("pattern")
    .attr("id", "grid")
    .attr("width", 20)
    .attr("height", 20)
    .attr("patternUnits", "userSpaceOnUse");

// 添加网格线
pattern.append("path")
    .attr("d", "M 20 0 L 0 0 0 20")
    .attr("stroke", "lightgray")
    .attr("stroke-width", 0.5)
    .attr("fill", "none");

function zoomed(event, svg) {
    // 对g进行偏移赋值
    g.attr("transform", event.transform);
}

var zoom = d3
    .zoom()
    .scaleExtent([0.3, 10])
    .on("zoom", (event) => zoomed(event));

g.call(zoom).on("mousedown.zoom", null);

let isPanning = false;
let startX = 0, startY = 0;

function panMouseDown(event) {
    if (event.button !== 1) return; // 中键按下
    console.log('中键按下');
    // event.preventDefault(); // 阻止默认行为
    isPanning = true;
    [startX, startY] = d3.pointer(event);
}

function panMouseMove(event) {
    if (isPanning) {
        event.preventDefault();
        const [x, y] = d3.pointer(event);
        const transform = d3.zoomTransform(g.node()); // 获取当前变换

        const transformedX = (x - startX) / transform.k;
        const transformedY = (y - startY) / transform.k;
        zoom.translateBy(g, transformedX, transformedY); // 使用偏移量进行平移
        startX = x; // 更新起始位置
        startY = y;
    }
}

function panMouseUp() {
    if (isPanning) {
        isPanning = false;
    }
}

// 画笔状态
let isBrushDrawing = false;
// 路径
let pathData = '';
let currentPath = null;

// 获取转换坐标
function getTransformedCoordinate(event) {
    // 获取鼠标当前位置的坐标
    const [x, y] = d3.pointer(event);
    // 获取画布当前的平移和缩放值
    const transform = d3.zoomTransform(g.node());
    // 应用平移和缩放转换，得到变换后的坐标
    const transformedX = (x - transform.x) / transform.k;
    const transformedY = (y - transform.y) / transform.k;
    return [transformedX, transformedY];
}

// 绘制/更新画笔路径        
function updateBrushPath(x, y) {
    pathData += `${pathData ? ' L' : 'M'} ${x} ${y}`;
    if (currentPath) {
        currentPath.attr('d', pathData);
    } else {
        currentPath = g.append('path')
            .attr('id', 'path')
            .attr('d', pathData)
            .attr('stroke', 'red')
            .attr('fill', 'none')
            .attr('stroke-width', 2);
    }
}

// 画笔 - 监听事件
function brushMouseDown(event) {
    if (event.button !== 0) return; // 检查左键
    console.log('左键按下');
    isBrushDrawing = true;
    const [x, y] = getTransformedCoordinate(event);
    updateBrushPath(x, y);
}

function brushMouseMove(event) {
    if (isBrushDrawing) {
        // 获取缩放及平移后的坐标
        const [x, y] = getTransformedCoordinate(event);
        updateBrushPath(x, y);
    }
}

function brushMouseUp(event) {
    if (isBrushDrawing) {
        isBrushDrawing = false;
        pathData = '';
        currentPath = null;
    }
}

svg.on("mousedown", function (event) {
    panMouseDown(event);
    brushMouseDown(event);

    svg.on("mousemove", function (event) {
        panMouseMove(event);
        brushMouseMove(event);
    });
    svg.on("mouseup", function (event) {
        panMouseUp(event);
        brushMouseUp(event);

        svg.on("mousemove", function (event) {
            panMouseMove(event);
        });
        svg.on("mouseup", function (event) {
            panMouseUp(event);
        });
    });
});

感谢阅读！在您离开之前，不妨留下您的足迹：

👍 点个赞，让我知道您喜欢这篇文章！

📝 有任何想法、建议或问题？欢迎在下方评论区分享您的想法！

🔁 分享给您的朋友们，让更多人受益！

💌 喜欢我的内容？立即订阅我的博客，获取更多精彩内容！

谢谢您的支持与参与，让我们一起创造更好的内容体验！

HahaMonsters
关注
  • 27
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3-canvas:d3.js 的画布渲染助手
06-12
d3.js 画布 用于渲染到 HTML5 画布的 d3.js 插件。 用法 D3 是关于将数据绑定到元素。 但是，与 SVG 不同的是，canvas 是由 JavaScript API 驱动的，而不是由 DOM 元素驱动的。 d3.canvas.line（和径向） var data = [ [ 0 , 1 ] , [ 1 , 1 ] , [ 2 , 2 ] , [ 3 , 3 ] , [ 4 , 5 ] ] , line ; // the svg way line = d3 . svg . line ( ) ; d3 . select ( 'path' ) . datum ( data ) . attr ( 'd' , line ) ; // using d3.canvas line = d3 . canvas . line ( ) ; d3 . select ( 'canvas' )
图形与可视化技术：Canvas，SVG，WebGL等图形技术以及D3，Three.js等可视化库的使用
最新发布
哎 你看的博客
05-11 720
图形与可视化技术：Canvas，SVG，WebGL等图形技术以及D3，Three.js等可视化库的使用、代码示例
d3+svg画图基础应用
大兵的猫
10-11 1692
d3+svg画图基础应用 1.svg 1.1 简介 SVG，是一种用于描述二维的可缩放矢量图形，基于XML的标记语言，像JPEG和JPG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真和降低质量，并且可以方便的修改内容。 1.2 常用标签和属性 svg：SVG容器； defs：SVG允许定义以后需要重复使用的图形元素，建议所有需要再次使用的元素定义在defs元素里面；可以增强SVG内容的易读性和可访问性defs元素中定义的图形元素不会直接呈现，可以在视口的任意地方利用use标签呈现；
svg和d3学习篇
pgLi
04-26 3318
一、SVG学习1. <svg>标签<svg width="300" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!--width 和 height 属性可设置此 SVG 文档的宽度和高度。--> <!--version 属性可定义所使
svg.js使用教程
IT飞牛
02-13 7984
在日常web开发过程中，我们会需要显示一些图形化的元素，使用div+css、ps图片是常见的实现方式。但使用svg来绘制可能更加合适，SVG是，有一些预定义的形状元素，可被开发者使用和操作： 矩形(rect)、 圆形(circle)、 椭圆(ellipse)、 线(line)、 折线(polyline)、 多边形(polygon)、 路径(path)。svg可以是独立的*.svg文件，可以通过来引入。也可以直接将svg代码写入html中，开发和使用起来非常灵活。本教程主要介绍svg.js。
初识D3&svg初始图形元素
feeling_time的博客
04-23 370
初识D3&svg初始图形元素
基于D3.js实现时钟效果
10-18
D3.js，即Data-Driven Documents，是一个允许使用Web标准技术（HTML、SVG和CSS）来创建和控制文档的JavaScript库，特别是在数据可视化方面表现出众。 ### D3.js基础 D3.js使用数据驱动的方法来动态更新文档。它将...
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
10-14
在本文中，我们将深入探讨如何在Vue项目中利用SVG文件并实现SVG元素的放大缩小功能，同时结合D3.js库进行操作。首先，SVG（Scalable Vector Graphics）是一种用于描述2D图形的矢量图形格式，它允许无限缩放而不会...
利用d3.js实现蜂巢图表带动画效果
10-16
在现代前端开发中，数据可视化是展示信息的关键技术之一，其中使用JavaScript库d3.js创建复杂和动画丰富的图表成为一种趋势。d3.js是一个强大的数据可视化工具库，它允许开发者使用Web标准技术来创建动态的、数据...
d3.js 实现文字云效果 简单例子
10-12
7. **更新和动画**：如果数据发生变化，D3.js提供了平滑过渡的功能，可以使用`transition()`方法来更新词云的形状和大小，实现动态效果。 **案例分析** 在你提供的例子中，"文字云"文件很可能包含了实现上述步骤的...
js+SVG实现动态时钟效果
10-18
在本文章中，我们将会探讨如何利用...通过本文的介绍，我们可以掌握如何使用JavaScript和SVG来实现一个基本的动态时钟效果。对于初学者来说，这个示例可以作为学习Web前端技术，特别是动态图形表现的一个良好的起点。
svg和D3.js
woyebuzhidao321的博客
02-27 914
像素图由一个个像素块组成，矢量图由多个数学公式绘制曲线组成，这样即使我们缩放，数学公式会重新计算，所以矢量图不会出现失真。 二、D3.js使用 https://d3js.org/ D3js 是一个可以基于数据来操作文档的 JvaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。 三、D3操作svg 四、D3绑定数据 五、绘制静态直方图
运用js绘制SVG图片
sina_panda
03-04 2773
/** * Create an <svg> element and draw a pie chart into it. * 创建一个<svg>元素，并在其中绘制一个饼状图 * Arguments: * 参数： * data: an array of numbers to chart, one for each wedge of the pie. * data：用于绘制数据的类型数
用js动态创建svg
武林半侠的博客
12-31 4135
要实现的效果 svg文件的写法： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="300px"&gt
数据可视化（canvas、svg)
urnottalent的博客
05-24 584
数据可视化（canvas、svg)
学习笔记——SVG中的容器元素
qq_41339126的博客
05-05 91
容器元素：defs、use、g、symbol。
【 SVG 】二、SVG 容器元素
镜花水月
07-03 390
svg元素、svg、defs、mask、pattern、symbol、g、a；
SVG.js：优雅地在Web上绘制SVG图形
gitblog_00070的博客
04-18 672
SVG.js：优雅地在Web上绘制SVG图形 项目地址:https://gitcode.com/wout/svg.js SVG.js 是一个轻量级、强大的JavaScript库，专为在Web页面中动态创建和操作 Scalable Vector Graphics (SVG) 而设计。它简化了SVG编程，并提供了丰富的功能，让你能够以更直观的方式构建出美观且响应式的矢量图形。 项目简介 SVG.js ...
03——用 js 创建svg
weixin_42289080的博客
11-24 3933
实际使用svg中，我们经常会用js去操作svg 一、核心API： 1、创建图形：ns 指命名空间，tagName 是标签名，例如svg、rect document.createElementNS(ns, tagName) 2、添加子节点 element.appenChild(childElement) 3、获取、设置属性 element.getAttribute(name) element.setAttribute(name, value) 二、实例 <div id="svgArea">&
d3js实现svg缩放
06-02
要实现SVG缩放，可以通过d3js的zoom函数来实现。下面是一个简单的例子： 首先，需要定义一个SVG元素和一个包含所有图形元素的g元素： ```html <svg id="my-svg" width="500" height="500"> <!-- 所有图形元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值