写了一个svg七巧板拼图的小东西，可以拖动移动，改变颜色边框，旋转角度，然后保存图片。
保存图片用到的html2canvas.js和canvg.js，canvg用来将svg转换成canvas，html2canvas将html转换成canvas，最后进行保存
效果如下：
保存图片：
下面附上代码，canvg.js可以去自行搜索下载：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/canvg.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<style type="text/css">
.mian {
width: 600px;
height: 600px;
border: 2px solid black;
overflow: hidden;
position: relative;
float: left;
}
</style>
</head>
<body>
<div style="float: left;" class="qi">
<svg height="400" width="400" class="svg">
<polygon points="0,0,0,400,200,200" style="fill:#ffaa7f;stroke:#000000;stroke-width:1" />
<polygon points="0,0,400,0,200,200" style="fill:#2e74e6;stroke:#000000;stroke-width:1" />
<polygon points="400,0,400,200,300,100" style="fill:#00aa00;stroke:#000000;stroke-width:1" />
<polygon points="400,200,300,100,200,200,300,300" style="fill:#ffff7f;stroke:#000000;stroke-width:1" />
<polygon points="200,200,300,300,100,300" style="fill:#ffaaff;stroke:#000000;stroke-width:1" />
<polygon points="300,300,100,300,0,400,200,400" style="fill:#00aaff;stroke:#000000;stroke-width:1" />
<polygon points="400,400,400,200,200,400" style="fill:#d92b97;stroke:#000000;stroke-width:1" />
</svg>
</div>
<!-- 一正方形：五块等腰直角三角形(两块小型三角形、一块中型三角形和两块大型三角形)、一块正方形和一块平行四边形。 -->
<div class="mian">
</div>
<div class="setting" style="padding: 10px;float: left;">
<div>
颜色
<input class="tbcolor" type="color" onchange="changescolor()" />
</div>
<div>
边框颜色
<input class="tbstrokcolor" onchange="changestrok()" type="color" />
</div>
<div>
边框宽度
<input class="tbstrokwidth" min="0" type="number" value="1" onclick="changestrokwidth()" onchange="changestrokwidth()">
</div>
<div>
旋转角度(顺时针)
<input class="tbchangedeg" type="number" value="0" onclick="changedeg()" onchange="changedeg()">
</div>
<div>
<button onclick="xchange()">左右翻转</button>
<button onclick="ychange()">上下翻转</button>
</div>
<div>
<button onclick="deletepolgon()">删除</button><button onclick="saveimg()">保存</button>
</div>
<div>
<table>
<tr>
<td> </td>
<td><button onmousedown="up()">上</button></td>
<td> </td>
</tr>
<tr>
<td><button onmousedown="left()">左</button></td>
<td> </td>
<td><button onmousedown="right()">右</button></td>
</tr>
<tr>
<td> </td>
<td><button onmousedown="down()">下</button></td>
<td> </td>
</tr>
</table>
</div>
</div>
<script>
var selected; //选择的形状
//保存图片
var saveimg = function() {
var mian = $(".mian").clone().appendTo($("body"));
showQRCode(mian);//svg转canvas
html2canvas(mian).then(function(canvas) {
var strDataURI = canvas.toDataURL("image/jpeg");
var image = strDataURI.replace("image/jpeg", "image/octet-stream");
var triggerDownload = $("<a></a>").appendTo($("body")).attr("href", image).attr("download", "ewm.png");
triggerDownload[0].click();
mian.remove();
triggerDownload.remove();
})
}
//svg转canvas
var showQRCode = function(mian) {
scrollTo(0, 0);
if (typeof html2canvas !== 'undefined') {
//以下是对svg的处理
var nodesToRecover = [];
var nodesToRemove = [];
var svgElem = mian.find('svg');
svgElem.each(function(index, node) {
var parentNode = node.parentNode;
var svg = node.outerHTML.trim();
var canvas = document.createElement('canvas');
canvgv2(canvas, svg);
if (node.style.position) {
canvas.style.position += node.style.position;
canvas.style.left += node.style.left;
canvas.style.top += node.style.top;
}
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
}
}
//上移
var up = function() {
var timer = setInterval(function() {
if (selected == null) return;
$(selected).css({
"top": parseInt((selected).css("top")) - 1
});
}, 100)
$(this).on('mouseup', function() {
clearInterval(timer);
})
}
//下移
var down = function() {
var timer = setInterval(function() {
if (selected == null) return;
$(selected).css({
"top": parseInt((selected).css("top")) + 1
});
}, 50)
$(this).on('mouseup', function() {
clearInterval(timer);
})
}
//左移
var left = function() {
var timer = setInterval(function() {
if (selected == null) return;
$(selected).css({
"left": parseInt((selected).css("left")) - 1
});
}, 50)
$(this).on('mouseup', function() {
clearInterval(timer);
})
}
//右移
var right = function() {
var timer = setInterval(function() {
if (selected == null) return;
$(selected).css({
"left": parseInt((selected).css("left")) + 1
});
}, 50)
$(this).on('mouseup', function() {
clearInterval(timer);
})
}
//旋转
var changedeg = function() {
if (selected == null) return;
$(selected).css({
"transform": "rotate(" + $(".tbchangedeg").val() + "deg)"
});
}
//左右翻转
var xchange = function() {
if (selected == null) return;
if ($(selected).css("transform").indexOf("rotateY") != -1) {
$(selected).css("transform", $(selected).css("transform").replace('rotateY(180deg)', ''));
} else {
$(selected).css("transform", $(selected).css("transform").replace('none', '') + ' rotateY(180deg)');
}
}
//上下翻转
var ychange = function() {
if (selected == null) return;
if ($(selected).css("transform").indexOf("rotateX") != -1) {
$(selected).css("transform", $(selected).css("transform").replace('rotateX(180deg)', ''));
} else {
$(selected).css("transform", $(selected).css("transform").replace('none', '') + ' rotateX(180deg)');
}
}
//删形状
var deletepolgon = function() {
if (selected == null) return;
selected.remove();
$(".tbcolor").val("");
$(".tbstrokcolor").val("");
$(".tbstrokwidth").val(0);
selected = null;
}
//改变颜色
var changescolor = function() {
var style = $("polygon", selected).attr("style");
var jsonstr = '{"' + style.replace(/:/g, '":"').replace(/;/g, '","') + '"}';
var sett = JSON.parse(jsonstr);
sett.fill = $(".tbcolor").val();
var newstyle = JSON.stringify(sett).replace('}', '').replace('{', '').replace(/"/g, '').replace(/,/g, ';')
$("polygon", selected).attr("style", newstyle);
}
//边框宽度
var changestrokwidth = function() {
if (selected == null) return;
var style = $("polygon", selected).attr("style");
var jsonstr = '{"' + style.replace(/:/g, '":"').replace(/;/g, '","') + '"}';
var sett = JSON.parse(jsonstr);
sett["stroke-width"] = $(".tbstrokwidth").val()
var newstyle = JSON.stringify(sett).replace('}', '').replace('{', '').replace(/"/g, '').replace(/,/g, ';')
$("polygon", selected).attr("style", newstyle);
}
//边框颜色
var changestrok = function() {
var style = $("polygon", selected).attr("style");
var jsonstr = '{"' + style.replace(/:/g, '":"').replace(/;/g, '","') + '"}';
var sett = JSON.parse(jsonstr);
sett.stroke = $(".tbstrokcolor").val();
var newstyle = JSON.stringify(sett).replace('}', '').replace('{', '').replace(/"/g, '').replace(/,/g, ';')
$("polygon", selected).attr("style", newstyle);
}
//排序
Array.prototype.OrderByAsc = function(func) {
var m = {};
for (var i = 0; i < this.length; i++) {
for (var k = 0; k < this.length; k++) {
if (func(this[i]) < func(this[k])) {
m = this[k];
this[k] = this[i];
this[i] = m;
}
}
}
return this;
}
Array.prototype.OrderByDesc = function(func) {
var m = {};
for (var i = 0; i < this.length; i++) {
for (var k = 0; k < this.length; k++) {
if (func(this[i]) > func(this[k])) {
m = this[k];
this[k] = this[i];
this[i] = m;
}
}
}
return this;
}
//移动
$(".svg polygon").on('mousedown', function() {
var $this = this;
var move = true;
var points = $(this).attr("points").split(',');
var pointlist = [];
for (var i = 0; i < points.length / 2; i++) {
pointlist.push([
parseInt(points[i * 2 + 0]),
parseInt(points[i * 2 + 1])
]);
}
pointlist.OrderByAsc(function(e) {
return e[0];
});
var minleft = pointlist[0][0];
var width = pointlist[pointlist.length - 1][0] - pointlist[0][0];
pointlist.OrderByAsc(function(e) {
return e[1];
});
var mintop = pointlist[0][1];
var height = pointlist[pointlist.length - 1][1] - pointlist[0][1];
var newpoint = [];
for (var i = 0; i < points.length / 2; i++) {
newpoint.push(parseInt(points[i * 2 + 0]) - minleft);
newpoint.push(parseInt(points[i * 2 + 1]) - mintop);
}
var abulutesite = [event.clientX - minleft, event.clientY - mintop];
var divmove = $("<div></div>").appendTo($("body"));//移动中的虚影
divmove.css({
width: width + "px",
height: height + "px",
'position': 'absolute',
opacity: 0.5,
left: minleft + 10,
top: mintop + 10
});
divmove.html('<svg style="width:' + width + 'px;height:' + height + 'px;"><polygon points="' + newpoint.join(',') +
'" style="' + $(this).attr("style") + '" /></svg>');
$(window).off('mousemove').on('mousemove', function(event2) {
if (move) {
var newpostion = {
left: event2.clientX - abulutesite[0],
top: event2.clientY - abulutesite[1]
};
divmove.css(newpostion);
//判断位置在容器里面 不是鼠标过，是容器过
var top = [$(".mian").offset().top, $(".mian").offset().top + $(".mian").height()];
var left = [$(".mian").offset().left, $(".mian").offset().left + $(".mian").width()];
if (newpostion.left <= left[1] && (newpostion.left + width) >= left[0] && newpostion.top <= top[1] && (
newpostion.top + height) >= top[0]) {
$(".mian").css("border", "2px solid yellow");
} else {
$(".mian").css("border", "2px solid black");
}
}
})
$(window).off('mouseup').on('mouseup', function(event3) {
if (move) {
var newpostion = {
left: event3.clientX - abulutesite[0],
top: event3.clientY - abulutesite[1]
};
divmove.css(newpostion);
//判断位置在容器里面 不是鼠标过，是容器过
var top = [$(".mian").offset().top, $(".mian").offset().top + $(".mian").height()];
var left = [$(".mian").offset().left, $(".mian").offset().left + $(".mian").width()];
if (newpostion.left <= left[1] && (newpostion.left + width) >= left[0] && (newpostion.top + height) >= top[0]) {
var newpolygon = $("<div></div>").appendTo($(".mian"));
newpolygon.html('<svg style="width:' + width + 'px;height:' + height + 'px;"><polygon points="' + newpoint.join(
',') +
'" style="' + $($this).attr("style") + '" /></svg>');
newpostion = {
left: event3.clientX - abulutesite[0] - $(".mian").offset().left - 2,
top: event3.clientY - abulutesite[1] - $(".mian").offset().top - 2,
"position": "absolute"
};
newpolygon.css(newpostion);
setting($("polygon", newpolygon));
}
divmove.remove();
}
$(".mian").css("border", "2px solid black");
move = false;
})
})
//容器内形状控制
var setting = function(ele) {
//移动
$(ele).on('mousedown', function() {
var move = true;
var $this = $(this).parent().parent();
var fristsite = {
left: $(this).offset().left,
top: $(this).offset().top
};
var size = [$(this).width(), $(this).height()]
var abulutesite = [event.clientX - $(this).offset().left, event.clientY - $(this).offset().top];
$($this).css({
opacity: 0.5,
})
$(window).off('mousemove').on('mousemove', function(event2) {
if (move) {
var newpostion = {
left: event2.clientX - abulutesite[0] - $(".mian").offset().left - 2,
top: event2.clientY - abulutesite[1] - $(".mian").offset().top - 2
};
$($this).css(newpostion);
}
})
$(window).off('mouseup').on('mouseup', function(event3) {
if (move) {
var newpostion = {
left: event3.clientX - abulutesite[0] - $(".mian").offset().left - 2,
top: event3.clientY - abulutesite[1] - $(".mian").offset().top - 2
};
var left = [$(".mian").offset().left, $(".mian").offset().left + $(".mian").width()];
$($this).css(newpostion);
$($this).css({
opacity: 1
});
move = false;
}
})
})
//设置样式
$(ele).on('click', function() {
var style = $(ele).attr("style");
var jsonstr = '{"' + style.replace(/:/g, '":"').replace(/;/g, '","') + '"}';
var sett = JSON.parse(jsonstr);
$(".tbstrokwidth").val(sett["stroke-width"]);
$(".tbstrokcolor").val(sett.stroke);
$(".tbcolor").val(sett.fill);
$(".tbchangedeg").val(0)
selected = $(this).parent().parent();
})
$(ele).click();//移动到容器默认选中
}
</script>
</body>
</html>
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
