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编辑器
不懂可交流
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
