[*][b]在线画图插件open.jquery.draw.core.js[/b]
[*][b]SVG元素原型,用于插件克隆各种SVG元素都页面[/b]
[*][b]前端HTML页面[/b]
请大家支持Open JQuery [url]http://www.openjquery.com[/url],支持原创SVG/VML在线画图插件open.jquery.draw.core.js。
原文:[url]http://www.openjquery.com/html/34/n-34.html[/url]
(function($, undefined) {
var $s;
$.fn.draw = function() {
$s = this;
$s.load("../script/coredraw/open.jquery.draw.model.html", function() {
$s.panel = $("svg", $s);
});
return this;
}
$.fn.line = function(spos, epos, attrs) {
var $l = $("#LINE").clone().appendTo($s.panel);
$l.attr({"x1": spos.x, "y1": spos.y, "x2": epos.x, "y2": epos.y});
_drawAttr($l, attrs);
}
$.fn.polyline = function(poss, attrs) {
var s = "", $l = $("#POLYLINE").clone().appendTo($s.panel);
for(var i in poss) {
s += (s == "" ? "" : " ") + poss[i].x + "," + poss[i].y;
}
$l.attr("points", s);
_drawAttr($l, attrs);
}
$.fn.circle = function(pos, r, attrs) {
var $c = $("#CIRCLE").clone().appendTo($s.panel);
$c.attr({"cx": pos.x, "cy": pos.y, "r": r});
_drawAttr($c, attrs);
}
$.fn.oval = function(pos, rx, ry, attrs) {
var $c = $("#OVAL").clone().appendTo($s.panel);
$c.attr({"cx": pos.x, "cy": pos.y, "rx": rx, "ry": ry});
_drawAttr($c, attrs);
}
$.fn.square = function(pos, r, attrs) {
var $c = $("#RECT").clone().appendTo($s.panel);
$c.attr({"x": pos.x, "y": pos.y, "width": r, "height": r});
_drawAttr($c, attrs);
}
$.fn.rect = function(pos, w, h, attrs) {
var $c = $("#RECT").clone().appendTo($s.panel);
$c.attr({"x": pos.x, "y": pos.y, "width": w, "height": h});
_drawAttr($c, attrs);
}
$.fn.clearDraw = function() {
$s.panel.remove();
$s.load("../script/coredraw/open.jquery.draw.model.html", function() {
$s.con = $s.element; $s.panel = $("svg", $s.con);
});
}
function _drawAttr($obj, attrs) {
if(attrs) {
$obj.css({"fill": attrs.fill ? attrs.fill : "white",
"stroke": attrs.borderColor ? attrs.borderColor : "white",
"stroke-width": attrs.borderWidth ? attrs.borderWidth : 0});
}
}
})(jQuery)
[*][b]SVG元素原型,用于插件克隆各种SVG元素都页面[/b]
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<line id="LINE" stroke="black" stroke-width="1" />
<polyline id="POLYLINE" fill="white" stroke="black" stroke-width="1" />
<circle id="CIRCLE" />
<ellipse id="OVAL" />
<rect id="RECT" />
</svg>
[*][b]前端HTML页面[/b]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Open JQuery核心画图插件在线演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script src="../script/jquery/jquery-1.7.1.min.js"></script>
<script src="../script/coredraw/open.jquery.draw.core.js"></script>
</head>
<body>
<div id="graph" style="margin: 10px;height: 300px;border: 1px solid #999;"></div>
<div style="margin: 15px;text-align: center;">
<a href="#" onclick="drawMain.line({'x': 50, 'y': 50}, {'x': 130, 'y': 130}, {'borderWidth': '2', 'borderColor': 'black'});">画直线</a>
<a href="#" onclick="drawMain.polyline([{'x': 200, 'y': 50}, {'x': 220, 'y': 70}, {'x': 150, 'y': 160}, {'x': 200, 'y': 200}], {'borderWidth': '6', 'borderColor': '#006000'});">画折线</a>
<a href="#" onclick="drawMain.circle({'x': 300, 'y': 200}, 40, {'fill': 'red'});">画圆</a>
<a href="#" onclick="drawMain.oval({'x': 430, 'y': 130}, 50, 30, {'fill': 'blue', 'borderWidth': 2, 'borderColor': 'black'});">画椭圆</a>
<a href="#" onclick="drawMain.square({'x': 530, 'y': 130}, 80, {'fill': 'yellow'});">画正方形</a>
<a href="#" onclick="drawMain.rect({'x': 680, 'y': 100}, 160, 80, {'fill': 'green', 'borderWidth': '4', 'borderColor': 'blue'});">画长方形</a>
<span style="margin-left: 20px;"><a href="#" onclick="drawMain.clearDraw();" style="text-decoration: none;">清空</a></span>
</div>
<script>
var drawMain = $("#graph").draw();
</script>
</body>
</html>
请大家支持Open JQuery [url]http://www.openjquery.com[/url],支持原创SVG/VML在线画图插件open.jquery.draw.core.js。
原文:[url]http://www.openjquery.com/html/34/n-34.html[/url]