前端知识 【svg+热区】处理平面图

最新推荐文章于 2022-11-30 20:55:38 发布
最新推荐文章于 2022-11-30 20:55:38 发布
阅读量9.1k 收藏 6
点赞数 1
分类专栏： 技术类 文章标签： svg jquery 热区 画图 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunjiongjun/article/details/8709720
版权
为了解决仓库货架库存展示问题，采用SVG技术结合热区进行平面图绘制。传统方法使用label绝对定位，但遇到不规则形状时变得复杂。通过SVG的矢量图形特性和热区，可以实现更灵活的图形绘制和动态交互。文中介绍了SVG的基本概念，并推荐使用Raphael JS库进行SVG操作，最终成功完成动态平面图的展示。
摘要由CSDN通过智能技术生成

1.背景：

为了更加直观的显示仓库系统中某个仓库中货架的库存情况，需要用平面图来展示，（需要动态文字，动态效果，比如点击事件等），尼玛，还居然不是很有规则。大小不一等，于是纠结起来...

2.传统的做法

label 绝对定位。但是这样往往做起来比较苦逼,遇到规则的还好，遇到不规则的就玩蛋去了。。。

3.创新做法

热区+svg 技术。下面开始一一分析

1.热区，大家都应该了解，使用DW就可以很容易的画出来、（蓝色区就是热区）

2.svg 

什么是SVG？(详细看w3c介绍)

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
最低0.47元/天 解锁文章
花果山小猴
关注
专栏目录
使用SVG制作热区图
Cmd的笔记本
08-18 1万+
前两大段都是闲侃，正文可从【准备工作】开始看
threejs场景打光
最新发布
m0_51495354的博客
07-23 278
为threejs场景打光，使得threejs场景的每一面墙都可以被照亮
svg格式室内地图（可以供参考学习使用）
12-05
一个svg格式的室内地图，可以提供对室内地图有兴趣的人，进行学习和研究，具体使用可以参考我的博客里的博文
html svg文件 热区,前端常识 【svg+热区】处理平面图
weixin_29768055的博客
06-18 926
前端知识 【svg+热区】处理平面图1.背景：为了更加直观的显示仓库系统中某个仓库中货架的库存情况，需要用平面图来展示，(需要动态文字，动态效果，比如点击事件等)，尼玛，还居然不是很有规则。大小不一等，于是纠结起来...2.传统的做法label 绝对定位。但是这样往往做起来比较苦逼,遇到规则的还好，遇到不规则的就玩蛋去了。。。3.创新做法热区+svg 技术。下面开始一一分析1.热区，大家都应该了解...
前端开发路线图
weixin_34234829的博客
11-23 202
2019独角兽企业重金招聘Python工程师标准>>> ...
这个户型设计前端图形化技术，你可能一辈子也学不会！
MMKJSH的博客
11-30 399
这个户型设计前端图形化技术，你可能一辈子也学不会！
前端 图片热区的使用
weixin_45111284的博客
09-17 2380
最近学习了图片热区，相信大家对热区的定位还存在疑惑，下面我将简单介绍一下它的使用 首先贴出它的代码 //热区 <img src="unite.jpg" usemap="#mymap"> <map name="mymap" id="mymap"> <area shape="circle" coords="75,75,75" alt="圆形热区" href=""> <area shape="rect" coords="10,160,150,280
html热区设置
tiantianzs的博客
04-22 1524
title: 热区设置 tags: html category: 前端开发 测量热区 用ps打开设置热区的图像，然后按如下步骤开启标尺 1、选择上方菜单栏的 “视图”，然后勾选标尺 2、之后回到图像编辑区域，会看到上方和左方出现了一个标尺 3、在标尺上右键，选择 像素 作为单位 4、之后就可以拉取尺子来测量图像 或 截取图像了 同时勾选上方菜单栏“窗口”的信息，在弹出的“信息”窗口可以设置“画板选项”，将“鼠标坐标”设置为 像素 圆形热区代码 <!DOCTYPE html> <html .
SVG+DIV画审批流程图，生成JSON
05-04
在这个项目中，"SVG+DIV画审批流程图"是指利用SVG元素和HTML的DIV标签来构造审批流程图的各个节点和连接线。SVG元素可以用来绘制流程图中的各种形状，如矩形、圆形、箭头等，而DIV则可以作为容器，承载这些图形或者...
学习笔记-SVG + 甘特图demo
09-14
demo的代码
planar-graph-to-svg:将平面图转换为 SVG 图像
06-20
平面图到 svg 将平面图转换为 SVG 字符串 例子 var toSVG = require ( 'planar-graph-to-svg' ) var ch = require ( 'convex-hull' ) var points = [ ] for ( var i = 0 ; i < 100 ; ++ i ) { points . push ( [ Math . random ( ) , Math . random ( ) ] ) } console . log ( toSVG ( ch ( points ) , points ) ) 输出： 安装 npm i planar-graph-to-svg 应用程序接口 var svg = require('planar-graph-to-svg')(edges,positions[,options]) edges是平面图
模拟图片热区 平面图点击及效果
01-08
模拟图片热区功能，利用.png定位在大图上，鼠标经过平面图有凸效果，可点击；可随网页大小缩放，
显示图像并设置热区实例
01-10
VS2008 C# 显示图像并设置热区实例
为图片根据坐标自动创建热区并点击变颜色
04-05
可以在页面上用鼠标随便点击 获取两个坐标、并自动创建热区、点击可以为此选取添加颜色、调至透明度
javascript实现动态统计图开发实例
10-23
主要介绍了javascript实现动态统计图开发实例，需要的朋友可以参考下
前端，可视化大屏，纯css3+svg动画实现流转动画
06-21
在数据可视化中，SVG常用来绘制流程图、图表和其他矢量图形。开发者可能使用SVG路径（path）元素来绘制线条和形状，结合CSS3动画，使得图形元素在指定路径上流动，呈现出动态流转的效果。 3. **流程图**: 在数据...
数据可视化 — 01_svg+echarts实现自定义厂区平面图
文泽路小男孩的博客
11-16 7170
文章目录svg+echarts实现自定义厂区平面图一、最终效果二、设计思路三、开发步骤3.1 在AI中画矢量图，并保存为svg格式3.2 使用svg2geojson插件，将svg转为geojson格式3.3 使用echarts，展现效果四、踩的坑4.1 正确的svg格式4.2 svg的\标签在geojson中无点坐标4.3 最后在浏览器中，地图上下颠倒180度 欢迎访问笔者个人技术博客： http://rukihuang.xyz/ svg+echarts实现自定义厂区平面图 一、最终效果 二、设计思路
【平面图理论】平面图学习笔记
CreationAugust is 14 years old forever
09-16 2801
我为什么现在要学平面图 因为顺切HNOI2010遇到了平面图判定… ————————————–线割分是我>w 首先是一些定义: 什么是平面图? 对于一个图G=,如果能把G画在一个平面上,且画出的图的任意两条边除了V中的节点没有其他交点,则图G为平面图. 平面图的面: 对于一个平面图,由如果存在一些边围成的区域,且这个区域内不包含这个图的点和边,那么我们称这个区域为该平面图的一个面
vue+echats+svg展示园区平面图的实例
04-01
以下是一个使用Vue和Echarts SVG展示园区平面图的简单实例： template: ``` <template> <div> <div ref="chart"></div> </div> </template> ``` script: ```javascript <script> import * as echarts from 'echarts'; export default { data() { return { chartData: [ { name: 'A区', value: 100 }, { name: 'B区', value: 80 }, { name: 'C区', value: 60 }, { name: 'D区', value: 40 }, { name: 'E区', value: 20 }, ], }; }, mounted() { this.renderChart(); }, methods: { renderChart() { const chart = echarts.init(this.$refs.chart); // 自定义图标路径，注意这里是相对路径 echarts.registerMap('demo', { svg: '/map.svg', }); chart.setOption({ tooltip: { trigger: 'item', }, series: [ { type: 'map', map: 'demo', itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, label: { show: true, position: 'inside', color: '#fff', }, }, emphasis: { areaColor: '#2a333d', label: { show: true, color: '#fff', }, }, }, data: this.chartData, }, ], }); }, }, }; </script> ``` 以上代码使用了echarts，首先需要安装echarts： ``` npm install echarts --save ``` 然后在mounted方法中初始化echarts实例，使用registerMap方法加载svg地图，最后使用setOption方法设置图表数据和样式。其中，map属性的值为注册的地图名称，itemStyle中normal表示正常状态下的样式，emphasis表示高亮状态下的样式，data表示需要展示的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值