在线画图插件open.jquery.draw.core.js
(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)
SVG元素原型，用于插件克隆各种SVG元素都页面
<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>
前端HTML页面
<!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
http://www.openjquery.com，支持原创SVG/VML在线画图插件open.jquery.draw.core.js。
原文：
http://www.openjquery.com/html/34/n-34.html
分享到：
相关推荐
This is SVG, a language for describing two-dimensional graphics in XML. The Scalable Vector Graphics (SVG) Copyright 2001, 2002, 2011 World Wide Web Consortium (Massachusetts Institute of ...
SVG（Scalable Vector Graphics）和VML（Vector Markup Language）是两种基于XML的矢量图形格式，它们允许开发者在网页上创建高质量、可缩放的图形。本文将深入探讨如何利用SVG和VML实现3D曲面效果，以及它们各自的...
SVG、CANVAS、VML是三种用于在Web上创建矢量图形的方法，它们各有优缺点，适应不同的场景需求。 SVG（Scalable Vector Graphics）是一种基于XML的开放标准，被广泛支持，尤其在现代浏览器中，如Firefox和Opera。在...
电力SVG图形浏览程序源代码是一个项目，用于展示和解析SVG（Scalable Vector Graphics）图形，尤其适用于处理来自南瑞的open3000系统导出的SVG图像。SVG是一种基于XML的矢量图像格式，它能够以清晰的分辨率显示复杂...
在IT行业中，SVG（Scalable Vector Graphics）是一种重要的图形格式，它被广泛应用于前端开发，尤其是对于图标设计和网页特效。本资源包名为“炫酷特效 / svg / 漂亮 icons”，显然，它专注于提供高质量且具有视觉...
SVG（Scalable Vector Graphics）和VML（Vector Markup Language）都是用于在网页上创建矢量图形的技术。在本文中，我们将深入探讨这两种技术如何应用于实现兼容所有浏览器的网络拓扑图，以及如何处理大量节点的显示...
这款SVG/HTML5动画图标可以在鼠标滑过图标时产生简单的循环播放的动画特效。 下面我们一起来简单解说一下实现这款SVG动画图标的过程。 HTML代码 毋庸置疑，SVG是这款图标的核心代码，图标的外观均是采用SVG路径...
相似，可以满足大多数WEB二维图形应用的需求，但目前的情况是：VML只能在IE中使用，SVG被firefox，opera等浏览器的最新版本支持， 并且是W3C制定的开放标准，但目前IE不内置支持SVG，只能通过ADOBE的SVG插件显示。...
在网页中使用VML时，你需要将VML代码嵌入到HTML文档中或者通过JavaScript动态生成。由于VML是微软提出的技术，因此它主要在Internet Explorer浏览器中得到良好支持。然而，对于其他浏览器，如Firefox、Chrome或...
在提供的压缩包"svg-edit-2.5.1"中，很可能包含了一个SVG编辑器的源代码。这个编辑器可能有以下功能： 1. **图形绘制**：用户可以通过工具栏选择不同的绘图工具，如线条、矩形、圆形、多边形等，并在画布上自由绘制...
SVG画图工具是一种创新性的在线解决方案，它允许用户在网页浏览器中直接进行可缩放矢量图形（SVG）的设计和编辑。SVG作为一种矢量图像格式，具有无损放大、清晰度不变、文件小巧等优点，因此在网页设计、图标制作、...
在压缩包中仅有一个名为"SVG"的文件，这可能是SVG源代码文件，也可能是包含了多个SVG示例的文件夹。如果是一个文件，它可能是一个SVG图像的XML源代码，可以直接用文本编辑器打开查看。如果是文件夹，里面可能包含多...
RaphaelJS是一款强大的JavaScript库，专门用于在SVG（Scalable Vector Graphics）和VML（Vector Markup Language）格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形，而且这些图形在任何...
"></vml:rect> ``` 2. **属性设置**：每个VML元素都有多种属性可以调整其外观，如`stroked`（是否画边框）、`fill`（填充颜色）、`strokecolor`（边框颜色）、`strokeweight`（边框宽度）等。 3. **坐标系统**：...
</vml:shape> </svg> ``` 在这个例子中，`<vml:shape>`定义了一个形状，`<vml:stroke>`和`<vml:fill>`分别设置了边框颜色和填充颜色。 **VML图形元素：** VML支持多种图形元素，包括但不限于： 1. **线条（line）...
《画图板源代码解析与应用》 在计算机科学领域，图形用户界面（GUI）的开发是不可或缺的一部分，尤其在教育、设计以及日常办公中，简单的绘图工具扮演着重要角色。本文将深入探讨一个名为“画图板”的源代码项目，...
SVGEditor1.3源代码是基于GLIPS技术构建的一款优秀的SVG（Scalable Vector Graphics）图形编辑工具的源码库。SVG是一种开放标准的矢量图形语言，它被广泛用于网页设计、移动应用以及各种图形丰富的场景，因为它可以...
不过，具体到“qtcjkfym”这个压缩包文件，由于没有更多信息，我们只能推测它可能包含了QT画图插件库的相关资源、源代码或编译好的库文件，具体使用方法和功能还需要根据文件内容来进一步了解。
GLIPS SVG Graphics Editor的源代码提供了深入理解SVG编辑器工作原理的机会，对于学习图形用户界面(GUI)开发、图形渲染和SVG处理的程序员尤其有价值。 1. **SVG基础知识** SVG是一种开放标准的矢量图形语言，允许...