d3开发Svg编辑器
为什么80%的码农都做不了架构师?>>>
d3.v3.min.js -- d3版本
需要使用 mini-ui插件,仅为样式使用,在编辑器页面只需 引入boot.js即可
界面预览:
<div class="mini-splitter" style="width:1245px;height:620px;"><div size="18%" showCollapseButton="true"><div id="form1"><%--编号--%><input id="fstrSceneId" name="fstrSceneId" class="mini-hidden"/><%--文件名称--%><input id="fstrThumbNail" name="fstrThumbNail" class="mini-hidden"/><table><tr><td class="tw">宽度:</td><td><input id="width" name="width" type="number" onmousewheel="updateRect(this)"onDOMMouseScroll="updateRect(this)" value="0"minValue="0" maxValue="1200"/></td></tr><tr><td class="tw">高度:</td><td><input id="height" name="height" type="number" onmousewheel="updateRect(this)"onDOMMouseScroll="updateRect(this)" value="0"minValue="0" maxValue="1200"/></td></tr><tr class="mini-hidden"><td>背景色:</td><td><input id="fill" name="fill" type="color" value="#000000"/></td></tr><tr class="mini-hidden"><td>边框颜色:</td><td><input id="stroke" name="stroke" type="color" value="#ffffff"/></td></tr><tr class="mini-hidden"><td>边框宽度:</td><td><input id="stroke-width" name="stroke-width" type="number" value="1" minValue="0"/></td></tr><tr><td class="tw">x:</td><td><input id="x" name="x" type="number" onmousewheel="updateRect(this)"onDOMMouseScroll="updateRect(this)" value="0" minValue="0"maxValue="1000"/></td></tr><tr><td class="tw">y:</td><td><input id="y" name="y" type="number" onmousewheel="updateRect(this)"onDOMMouseScroll="updateRect(this)" value="0" minValue="0"maxValue="1000"/></td></tr><tr><td class="tw">操作:</td><td style="text-align: left"><input value="新增" type="button" onclick="addSvg()"/><input value="保存" type="button" onclick="saveData()"/><input value="修改" type="button" onclick="updateRect()"/><input value="重置" type="button" onclick="init()"/><input value="删除" type="button" onclick="del()"/></td></tr></table></div></div><div id="canvas-panel" style="" showCollapseButton="true" size="75%"><div id="canvas"></div></div>
</div>
以下是javascript代码:
<script type="text/javascript">mini.parse()// svg对象var svg = null;// 当前选择的区域对象var selected = null;// 根节点对象var rootRect = null;var maxHeight = 0;var maxWidth = 0;var drag = d3.behavior.drag().origin(function (d) {return {x: d[0], y: d[1]};}).on("drag", dragged);function createSvg(height, width) {var data = d3.range(1).map(function () {return [0, 0];});svg = d3.select("#canvas").on("touchstart", nozoom).on("touchmove", nozoom).append("svg").attr('xmlns', 'http://www.w3.org/2000/svg').attr("width", width).attr("height", height);rootRect = svg.data(data).append("rect").attr("id", "svg").attr("width", width).attr("height", height).attr("transform", function (d) {return "translate(" + d + ")";}).attr("x", function (d, i) {return 0;}).attr("id", "rootRect").attr("y", 0).attr("stroke", "#ffffff").attr("stroke-width", "1").style("fill", "#000000").on("click", clicked).call(drag);selected = rootRect;var attributes = rootRect[0][0].attributes;for (var i = 0; i < 7; i++) {var name = attributes[i].name;var value = attributes[i].value;if (name !== "transform" || name !== "style") {$("#" + name).val(value);}}}function createSvgChildren(dataArray) {for (var j = 0; j < dataArray.length; j++) {var record = dataArray[j];var height = record.fstrHeight;var width = record.fstrWidth;var x = record.fstrX;var y = record.fstrY;var data = d3.range(1).map(function () {return [0, 0];});addFunction(data, width, height, x, y);}}function addSvg() {var width = $("#width").val();var height = $("#height").val();if (width === "0") {mini.alert("宽度不能为0");return;}if (height === "0") {mini.alert("高度不能为0");return;}var x = $("#x").val();var y = $("#y").val();var data = d3.range(1).map(function () {return [0, 0];});if (svg === null) {createSvg(height, width);} else {var rootRectWidth = d3.select("#rootRect")[0][0].width.animVal.value;var rootRectHeight = d3.select("#rootRect")[0][0].height.animVal.value;if (width > rootRectWidth) {alert("宽度不能大于背景宽度.");return;}if (height > rootRectHeight) {alert("高度不能大于背景高度.");return;}addFunction(data, width, height, x, y);}}function addFunction(data, width, height, x, y) {selected = svg.data(data).append("rect").attr("width", width).attr("height", height).attr("transform", function (d) {return "translate(" + d + ")";}).attr("x", x).attr("y", y).attr("stroke", "#ffffff").attr("stroke-width", "1").style("fill", "#000000").on("click", clicked).call(drag);}function clicked(d, i) {selected = d3.select(this);var attributes = d3.select(this)[0][0].attributes;for (var i = 0; i < 7; i++) {var name = attributes[i].name;var value = attributes[i].value;if (name !== "transform" || name !== "style") {$("#" + name).val(value);}}}function dragged(d) {var id = d3.select(this)[0][0].id;if (id === "rootRect") {return;}var rootRectWidth = d3.select("#rootRect")[0][0].width.animVal.value;var rootRectHeight = d3.select("#rootRect")[0][0].height.animVal.value;var width = d3.select(this)[0][0].width.animVal.value;var height = d3.select(this)[0][0].height.animVal.value;var x = d3.select(this)[0][0].x.animVal.value;var y = d3.select(this)[0][0].y.animVal.value;d[0] = x + d3.event.dx, d[1] = y + d3.event.dy;var rootRectEleObj = $("#rootRect");if (parseInt(x + d3.event.dx) < 0) {console.log("x不能小于0");return;}if (parseInt(y + d3.event.dy) < 0) {console.log("y不能小于0");return;}if (x + d3.event.dx + width > rootRectWidth) {console.log("宽度不能超过背景宽度." + "width:" + width + ",moveWidth:" + (x + width + d3.event.dx) + ",rootWidth:" + rootRectWidth);d[0] = rootRectWidth - width;}if (y + height + d3.event.dy > rootRectHeight) {console.log("高度不能超过背景高度." + "height:" + height + ",moveHeight:" + (y + height + d3.event.dy) + "rootWidth:" + rootRectHeight);d[1] = rootRectHeight - height;}d3.select(this).attr("x", d[0]);d3.select(this).attr("y", d[1]);d3.select(this).attr("transform", "translate(" + [0, 0] + ")");// updateRect();}function nozoom() {d3.event.preventDefault();}function init() {window.location.reload();}function del() {if (selected === null) {return;}var id = selected[0][0].id;if (id === "rootRect") {return;}if (confirm("确认要删除吗?")) {selected.remove();}}// 保存操作function saveData(){}function updateRect() {var width = $("#width").val();var height = $("#height").val();var x = $("#x").val();var y = $("#y").val();var id = selected[0][0].id;/*1.若修改的是背景则判断修改的高度是否超出了最大的窗口范围*/// (1)获取背景的高度if (id !== "rootRect") {var rootRectEleObj = $("#rootRect");var rootWidth = rootRectEleObj[0].width.animVal.value;var rootHeight = rootRectEleObj[0].height.animVal.value;if (parseInt(x) < 0) {alert("x不能小于0");x = 0;}if (parseInt(y) < 0) {alert("y不能小于0");y = 0;}if (parseInt(width) + parseInt(x) > rootWidth) {alert("宽度不能超过背景宽度." + (parseInt(width) + parseInt(x)) + "rootWidth:" + rootWidth);x = rootWidth - parseInt(width);$("#x").val(x);}if (parseInt(height) + parseInt(y) > rootHeight) {alert("高度不能超过背景高度." + (parseInt(height) + parseInt(y)) + "rootWidth:" + rootHeight);y = rootHeight - parseInt(height);$("#y").val(y);}} else {/*2.若修改的是窗口则判断当前窗口的高度是否超出了背景范围*/var widthArray = [];var heightArray = [];var rectEleArray = $("#canvas").find("rect");for (var j = 0; j < rectEleArray.length; j++) {if (rectEleArray[j].id !== "rootRect") {var w = rectEleArray[j].width.animVal.value + rectEleArray[j].x.animVal.value;var h = rectEleArray[j].height.animVal.value + rectEleArray[j].y.animVal.value;widthArray.push(w);heightArray.push(h);}}maxWidth = widthArray.sort().reverse()[0];maxHeight = heightArray.sort().reverse()[0];if (width < maxWidth) {alert("宽度太窄," + "MaxWidth:" + maxWidth + ",update width:" + width);$("#width").val(maxWidth);width = maxWidth;}if (height < maxHeight) {alert("高度太低," + "Max Height:" + maxHeight + ",update height:" + height);$("#height").val(maxHeight);height = maxHeight;}}$("#fstrSceneDesc").val($("#fstrSceneDesc").val());if (id === "rootRect") {svg.attr("width", width);svg.attr("height", height);selected.attr("stroke", "#ffffff");selected.attr("width", width);selected.attr("height", height);} else {var fillValue = $("#fill").val();var strokeValue = $("#stroke").val();var strokeWidthValue = $("#strokeWidth").val();selected.attr("width", width);selected.attr("height", height);selected.attr("x", x);selected.attr("y", y);selected.attr("fill", "#000000");selected.attr("stroke", "#ffffff");}}function CloseWindow(action) {if (action == "close" && form.isChanged()) {if (confirm("数据被修改了,是否先保存?")) {return false;}}if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);else window.close();}function onOk(e) {SaveData();}function onCancel(e) {CloseWindow("cancel");}
</script>
这是一个简易的svg编辑器
不懂可交流
转载于:https://my.oschina.net/hycky/blog/3027933
d3开发Svg编辑器相关推荐
- Qt开发Svg Editor分享
使用Qt开发SVG编辑器. (1)支持新建SVG文件. (2)支持画布设置,如大小.背景色.缩放等. (3)支持在新建的文件中添加/编辑以下矢量元素:直线.矩形.多边形.圆.自由线.文字. (4)支持 ...
- HTML内镶svg编辑器!后续改进,记录过程!
由于今年来物联网发展迅猛!正好赶上公司物联网革新!svg矢量图越来越不可同日而语了!缩放不失真将会成为物联网公司的首选!公司要求开发一款HTML内镶的svg编辑器!目前功能已经实现!但达不到公司预期效 ...
- MVC开发Markdown编辑器(1)
<!DOCTYPE html> MVC markdown MVC开发Markdown编辑器(1) 前言 安装 解析 结束语 前言 想在近段时间通过mvc开发个人博客,编辑器希望是markd ...
- Ubuntu下web开发,php编辑器推荐
Ubuntu下web开发,php编辑器推荐 转自:http://www.huqiang.name/2011/03/31/archives/129.html 关于编辑器,在笔者学习过程中发现zend s ...
- Linux嵌入式开发——vim编辑器
文章目录 Linux嵌入式开发--vim编辑器 准备操作 使用 打开 工作模式 一般模式 编辑模式 命令行模式 保存退出 其他操作方式 Linux嵌入式开发--vim编辑器 准备操作 首先我们需要安装 ...
- D3.js SVG绘图实践:波浪动画
效果图 TALK IS CHEAP 源码就50多行,比较好看懂. <!DOCTYPE html> <html><head><meta charset=&quo ...
- [译] 为数字优先新闻编辑室开发文本编辑器
原文地址:Building a Text Editor for a Digital-First Newsroom 原文作者:Sophia Ciocca 译文出自:掘金翻译计划 本文永久链接:githu ...
- 使用Batik开发SVG应用程序(一)
使用Batik开发SVG应用程序 翻译时间 2007-2-6 修订记录 2007-2-23 语言修改 Thierry Kormann ILOG ILOG Les Taissounières HB2 1 ...
- MFC开发xml编辑器小结
MFC开发xml编辑器整理 xml格式如下所示: <CalibrationData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan ...
- 微软ERP Axapta 开发环境编辑器的快捷键大全
微软ERP Axapta 开发环境编辑器的快捷键大全 新增 ctrl+n 新建一个新的方法 保存 ctrl+s 保存所有左边窗口打开的方法 设置断点 F9 设置或取消断点,没有断点则设置断 ...
最新文章
- 语义分割 DeepLabv3--Rethinking Atrous Convolution for Semantic Image Segmentation
- maven正确的集成命令-U-B
- Java 8 StampedLocks与ReadWriteLocks和同步
- python seaborn 热图 值对应颜色_基于行值的seaborn热图配色方案
- java this关键字的使用
- 如果动态的执行java脚本,这个在脚本公式配置的时候很方便
- This Android SDK requires Android Developer Toolkit version 23.0.0 or above
- paip.基于HTML gui界面的javascript JS实现SLEEP。。
- 层次分析法原理及计算过程详解
- Android Audio音频系统之深入浅出
- React 后台管理系统
- 前端——阿里图标的使用详解
- Linux中vsftpd服务配置(匿名,用户,虚拟用户)
- Java/171. Excel Sheet Column Number Excel序号转换数字
- 价格搜索上首页应该注意哪些?
- 还不懂vue-cli构建SPA项目和SPA项目结构吗?赶紧看看这一篇
- 论穷举法破解0到6位数登录密码的可行性
- Android连连看游戏
- codeforces 1665A (GCD vs LCM)思维
- MySQL--数据模型
热门文章
- 【阅读笔记】BI系统介绍及建设思路
- Multisim14.0的安装步骤
- 小米4 win10 刷回android,小米4如何从win10刷回miui 小米4win10刷回小米系统教程
- React封装多个日期段组件--BatchDate组件
- ZBrush建模的15个小技巧,萌新小白都用得上的干货,速看
- android studio调整字体大小,如何在Android Studio中增加字体大小?
- Sqlyog安装包下载
- Burp Suite使用介绍说明
- 字符(串)转换ASCII码
- 手游方舟怎么输入代码_方舟秘籍代码详细攻略介绍一览