vue中使用zrender实现页面元素拖拽

最新推荐文章于 2024-08-08 08:35:47 发布
最新推荐文章于 2024-08-08 08:35:47 发布
阅读量3.3k 收藏 7
点赞数
分类专栏： vue 文章标签： vue js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41320468/article/details/107368719
版权
本文介绍了如何在Vue项目中利用zrender库，结合HTML5的draggable属性，实现在页面上拖拽DOM元素并将其转换为canvas上的图形。通过监听拖拽相关事件，如dragstart、dragend、dragleave、drop和dragover，实现了元素的拖放功能。zrender作为canvas的封装库，使得图形绘制更加便捷，且它也是ECharts的基础。在实际应用中，可以将任何想要拖拽的DOM元素替换掉模板层的导航栏组件。
摘要由CSDN通过智能技术生成

业务描述

这也算是一个比较经典的页面交互，长按鼠标，可以将页面上的一些dom元素拖拽到指定区域，生成指定图形
所用到的技术就是h5的draggable属性和canvas画布，而本文所用的zrender，是一个对canvas的常见操作进行了简单封装的库（ps:著名的echarts.js底层就是又基于zrender构建的）

准备工作

npm install zrender -S

代码

话不多说，直接上代码，一些坑我也会在后面指出
zrender可直接在组件中引入

// vue template层代码
<div id="myCanvas" ref="myCanvas" @drop="drop_handler" @dragover="dragover_handler" />

<el-submenu index="1">
        <template slot="title">
             <img src="@/assets/images/filter.png" width="14" height="14">
             <span>demo</span>
        </template>
        <el-menu-item-group>
             <el-menu-item
最低0.47元/天 解锁文章
AugusQiu
关注
专栏目录
前端zrender框架使其可拖拽
小龙哒的博客
03-13 4984
废话不多说，上代码，代码都有注释 loadCamera: function (item, i) { //加载方法 item是实体类参数 //两个miter是为了适应屏幕自适应 let widthMiter = 1920/document.body.clientWidth; let heightMiter = 1080/document.body.clientHeight; ...
zrender在vue项目中的基本运用
weixin_44840212的博客
11-28 6441
本文只简绍zrender最简单的引入和绘制圆形方法 zrender实现简易画板功能在文章末尾可参考 首先保证项目已经下载了zrender包，npm install zrender 引入zrender import zrender from 'zrender' html结构里放置一个绘图容器 <div id="canvas"></div> 只需这三步，准备就绪，在mount...
ZRender: 轻量级二维绘图引擎实战指南
最新发布
gitblog_00353的博客
08-08 751
ZRender: 轻量级二维绘图引擎实战指南 zrenderA lightweight graphic library providing 2d draw for Apache ECharts项目地址:https://gitcode.com/gh_mirrors/zr/zrender 项目介绍 ZRender 是由 ECOM 团队开发的一款高效、轻量的二维绘图引擎。它支持多种渲染方式，包括 Ca...
ZRender （Canvas）简单使用（拖拽、缩放、旋转、文字、层级）
热门推荐
LynnhunAHa的博客
01-07 2万+
一、ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器； 二、下面是以图片做的简单demo，分为左中右三部分，左边是需要的图片，中间是绘图部分，右边是添加文字说明； &lt;body&gt; &lt;div id="container"&gt; &lt;div id="imgDiv" ...
vue-echarts的ZRender事件
David_jiahuan的博客
07-19 3841
首先贴出 vue-echarts 的官网连接：https://www.npmjs.com/package/vue-echarts 1、vue-echarts 具体在vue中的使用方法，本文中就暂时不多介绍了； 2、如何在vue中使用vue-echarts的鼠标事件： 具体使用方式跟vue中使用echarts一样，都是通过 @事件名 来实现的： <v-chart class="chart" ref="mychart" :option="defaultOption" autores..
【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元
张风捷特烈的博客
10-24 796
theme: cyanosis 持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 8 天，点击查看活动详情 1. Vue 中使用 ZRender 上一篇中，我们通过最原始的方式体验了一下 ZRender 的使用。接下来，为了更方便管理绘制测试效果，使用 Vue 框架集成 ZRender 库。看完本篇应该能体会出这个管理的必要性，我们要完成如下的绘制样例展示效果...
使用zrender.js+vue绘制体温单源码
11-05
使用vue+zrender.js制作的体温单插件 地址配置好和后端连通打包后能在任何项目下当插件使用 适用于学习vue+zrender.js+vue画布等技术 适用于有项目需要体温单
vue页面绘图_GitHub - Mchen1197729/vue-draw: 利用Vue&Zrender编写的一个简易的画图页面...
weixin_30595367的博客
02-22 1167
画板小项目的一些知识点总结画图的原理:画图分为三个步骤：1.点击鼠标左键一次,选择起始点(对于直线、矩形来说就是确定起点,对于圆形来说就是确定圆心)2.拖动鼠标选择终点,在这个阶段不断的修改图形终点的坐标属性(对于直线、矩形来说就是确定终点,对于圆形来说就是确定圆的半径)3.再次点击鼠标左键确定图形的终点,至此画图完成1.Event接口中两个重要的属性e.currentTarget:只读属性 永远...
canvas在图片上绘制标记，可拖拽、缩放，基于ZRender
weixin_44840212的博客
03-23 3227
如下图所示，在图片上做标记，如圆形、矩形等。 该demo实现画布在页面布局中缩放后居中显示，可拖拽、缩放、做标记说明。 项目下载地址：https://gitlab.com/zhangcw66/draw_mark 如粘贴以下代码，请安装zrender <template> <div class="draw-mark"> <div id="canvas" style...
GitHub 上值得收藏的100个精选前端项目！你知道几个？
phpyasi520的博客
08-22 1162
关注小编，回复“1” 加入我们一起学习，天天进步 引言 整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，作者简书上文章会持续更新，版权归原作者所有。 最新更新 codepen 一个在线编辑前端项目的网站，其中有一些前端大神的作品，也有很多令人惊艳的前端效果，可以浏览和下载使用。 codrops 一系列具有相当具有创意且有趣的前端效果的集合，是非常棒的学习资料，可以欣赏和下载使用。并且有些项目，也托管到了github仓库中 docsc...
图形报表使用的zrender插件
06-02
是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同
KonvaJS 原理解析
iA_Ai的博客
10-11 1000
前言 用过 Canvas 的都知道它的 API 比较多，使用起来也很麻烦，比如我想绘制一个圆形就要调一堆 API，对开发算不上友好。 const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); // 设置字体样式 context.font = '24px SimSun, Songti SC'; context.fillText('24px的宋体呈现', 20, 50); // 绘制完整圆
ZRender使用中关于图片裁剪、拖拽问题
qq_41604498的博客
08-29 2035
最近做项目使用到了ZRender ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器，绘图的时候特别方便。 如果想在画布中绘制图片，使用new zrender.Image 假如图片路径会存放在一个数组里面，然后通过for循环，绘制图片，那么图片都在同一个位置，最后绘制的会覆盖住之前的。所以设置draggable属性为...
zrender学习
颜值即正义
07-01 3817
这个是项目总结，不适合学习 <divid="canvas"style="background-image:url(./canvasbg.gif)"></div> 定义zrender初始化对象，背景是一个gif图 样式如下 ↓ 工程里， topo.html <div id = "container"> 画布 ...
vue+zrender实现医院体温单
Keir的博客
12-20 3361
项目背景 医院医护项目需求，需要用H5做一个通用的体温单 项目线上链接 http://120.238.239.27:9091/temperature/#/?PatientId=595603&VisitId=1&StartTime=2020-12-01 其中链接末尾参数PatientId，VisitId，StartTime可以根据需要可以动态配置，项目里会根据这些参数请求平台接口数据进行展示。 项目代码简介 由vue-cli4脚手架快速搭建生成，主要代码都在thermometer.vue文件里
使用vue+zrender绘制体温单 三测单(1)
qq_37347787的博客
07-28 2522
先上预览地址 http://106.12.212.110:8077/#/ 1.创建项目 使用vue init webpack temperaure 创建一个vue项目 然后安装axios zrender 命令分别是 npm install axios -S npm install zrender安装这2个组件 2.创建公共文件 在以后的使用中会出现本地调试和先上地址这是我们就创建以下目录 src/components这个目录放置我们的页面文件 src/js 这里放置我们以后绘制折线图 阴影图等公共方法
用zrender实现工作流图形化设计（附范例代码）
嘿嘿
09-13 643
公司研发的管理系统有工作流图形化设计和查看功能，这个功能的开发历史比较久远。在那个暗无天日的年月里，IE几乎一统江湖，所以顺理成章地采用了当时红极一时的VML技术。 后来的事情大家都知道了，IE开始走下坡路，VML这个技术现在早已灭绝，导致原来的工作流图形化功能完全不能使用，所以需要采用新技术来重写工作流图形化功能。 多方对比之后，决定采用zrender库来实现（关于zrender库的介绍，请看http://ecomfe.github.io/zrender/），花了一天的时间，终于做出了一个大致的效果模
vue使用 zrenderjs绘制坐标轴
qq_45511353的博客
01-25 2166
vue使用 zrenderjs绘制坐标轴 首先引入zrender.js 绘制y轴，x轴，以及散点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script type="text/javascript" src="./dist/zrender.min.js"></script> &lt
vue3使用zrender创建antd的图形元素
04-28
首先，需要在 Vue3 项目中引入 zrender： ```js import zrender from 'zrender' import 'zrender/lib/svg/svg' ``` 然后，在组件中使用 zrender 创建图形元素，可以按照以下步骤进行： 1. 在组件的 `setup` 钩子中创建 zrender 实例： ```js import { onMounted, onUnmounted, ref } from 'vue' import zrender from 'zrender' import 'zrender/lib/svg/svg' export default { setup() { const zr = ref(null) onMounted(() => { zr.value = zrender.init(document.getElementById('my-chart')) }) onUnmounted(() => { zr.value.dispose() }) return { zr, } } } ``` 2. 在模板中创建容器元素： ```html <template> <div id="my-chart"></div> </template> ``` 3. 使用 zrender 创建图形元素： ```js import { onMounted, onUnmounted, ref } from 'vue' import zrender from 'zrender' import 'zrender/lib/svg/svg' import { Rect } from 'zrender/lib/graphic' export default { setup() { const zr = ref(null) onMounted(() => { zr.value = zrender.init(document.getElementById('my-chart')) const rect = new Rect({ shape: { x: 10, y: 10, width: 100, height: 50, }, style: { fill: '#1890ff', }, }) zr.value.add(rect) }) onUnmounted(() => { zr.value.dispose() }) return { zr, } } } ``` 以上代码中，创建了一个矩形元素，并添加到 zrender 实例中。在实际使用中，可以根据需要创建不同的图形元素，并设置相应的属性和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值