原创开源SVG/VML在线画图插件源代码

最新推荐文章于 2022-12-19 20:23:48 发布

ToBeSomeOne

最新推荐文章于 2022-12-19 20:23:48 发布

阅读量405

点赞数 1

分类专栏：开源JQuery 文章标签： javascript 前端 ViewUI

开源JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

[*][b]在线画图插件open.jquery.draw.core.js[/b]


(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]

ToBeSomeOne

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原创开源SVG/VML在线画图插件源代码

[*][b]在线画图插件open.jquery.draw.core.js[/b][code="javascript"](function($, undefined) {var $s; $.fn.draw = function() { $s = this; $s.load("../script/coredraw/open.jquery.draw.model....
复制链接

扫一扫