為什么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编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。