Raphaeljs 插件实现任意SVG节点加载 - 最初的梦 - ITeye技术网站
博客分类：
SVG 和Raphael
一般在做svg 开发的时候你可选的三方类库实在太少了，Raphael 是一个用户量比较大，而且一直在升级维护，只能凑活用，Raphael 有一个很强大的功能就是几乎通吃所有浏览器，这种主要兼容旧式浏览器的设计基本抛弃了很多浏览器对svg高级功能的支持，例如SMIL 协议，但是相对来说能支持这么多浏览器版本ie6+ firefox chrome 而且性能还不错，api 非常简单使用户开发难度大大降低，官方网站的例子也挺炫。总体感觉svg 是种非常好的技术，尤其是在互联网web 中有天然的优势，而且几乎所有浏览器都支持，但是不知道svg 一直没有发展起来，也就是做charts控件公司和地图行业公司一般会使用，其他用应用的的不是很多，但是前一段有个趋势排名svg 上升势头不错，svg 应该是网页图形开发的非常重要的选择，不应该被边缘化，Raphael 的作者挺牛的还是参与svg 标准制定后来被sencha 弄走做charts extjs4系列的chart 好像就是他负责做的，这些都是闲话瞎扯。
使用中的烦恼
在使用raphael 的时候都被折磨过，raphael 基本都是编程式节点加载，通过代码设置svg 的节点属性
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
上边的代码
1：创建svg 画布
2：创建一个circle
3：给circle 添加属性
但是我们在实际工作中相当一部分的工作时在使用美工绘制好的图形，对图形中的某些部分进行控制，
只要经常使用raphael或者使用Extjs4 系列 的开发者肯定对这只老虎特别熟悉，他的源码也比较恐怖，
这个是在线演示里边有绘制这只老虎的源代码1537 行，我以前在看到这个例子实在不理解作者的目的。
这只虎形成的过程应该是一下步骤
1：美工设计小样
2：使用SVG 绘图工具画出来
3：交给开发者
开发者拿到这个svg 文件以后如果按照raphael 的做法那就是 把所有属性用raphael 的方式创建出来，我感觉任何程序员会直接疯掉的，这个工作量是让人无法接受，而你做的着所有的一切仅仅是想最后对这只虎进行 平移，缩放，隐藏等这些简单操作
我在当时使用的时候特别希望raphael 的作者提供一个节点加载工具，把这个复杂无比的东西一次性加载当做一个整体或者是一个图层处理，
什么是图层：
我不是专业做图形处理的这里是说一下我的理解，就以这只老虎为例子，如果一个画布上加载了一只老虎后又加载了另一只，我们对两个都是整体处理，可以整体调整位置，覆盖关系等就视为一个图层，加载了两个就是两个图层，可以单独处理互不影响，没有相对定位的问题，每个图层的位置都是相对于画布，这样业务处理会非常简单方便利于操作和理解
Raphael 不支持节点加载的方式处理svg 图形，在google上搜过很多的方式都没有找到如何处理已存在的节点加载方式，最近重新研究Raphael 尝试找方式处理这个问题，下边代码是通过写了一个Raphael 的插件解决加载节点，在Raphael绘图引擎的底层增加的对&g& 标签的支持，所以就可以对svg 进行类似于图层的处理。
代码中有对 path circle g 节点处理，不停的点击按钮就可以看出图形的变化
var canvas=Raphael(10,50,320,200);
var node= document.getElementById("cr");
var r1=canvas.circle(50, 50, 10);
r1.attr("fill", "#00ff00");
r1.attr("stroke", "#00ff00");
var r2=canvas.circle(20, 20, 30);
r2.attr("fill", "#00ff00");
r2.attr("stroke", "#00ff00");
var g=canvas.load(document.getElementById("gid")); // 使用扩展的load 方法加载一个外边 g标签
var tg=canvas.load(document.getElementById("triger"));//使用扩展的load 方法加载一个老虎var g= canvas.g(); // 创建一个g 标签
g.add(r1);
// 使用g 扩张的add 属性增加子元素
g.add(r2);
//circle.transform("t100,100r45t-100");
//path.transform("t500,500");
g.transform("t500,500"); // 对g 元素进行整体移动
扩展的g 标签可以通过raphael 的 transform 接口进行处理，但是好像使用animate 的使用出现了一些问题，正在研究animate 的实现原理和transform 的区别如何把animate 的算法应用的到g 标签需要研究一下。
版本改进1：
增加对vml group标签的支持，
增加g 标签add addArray 功能支持 ，可以很简单的把任意一个rapheal 节点放到g 或group 标签下
版本改进2：
实现了svg 在g 标签下raphael的animate 和transform支持，但是无法解决vml 中group 下的transform 和animate，
(178.1 KB)
下载次数: 62
(698.5 KB)
下载次数: 105
浏览: 335967 次
来自: 西安
真的好机智
我按照你的例子和官方4.1.3例子都提示SCRIPT438:
js的变量提升这个设计到底有什么用，出于什么目的做这样的设计？ ...
huoshouyu 写道想问下，第三点中提到，对于键值相同的， ...
很有用，楼主真机智，我怎么就没想到呢js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加
（一）js实现html节点、样式、事件的动态添加
①场景描述：我们需要动态获取后台数据并将这些数据以列表方式展示，其中列表存在自己的列表样式，每个item都存在自己的点击事件.....那么在这种情况下我们是不是就需要用到动态添加节点的模式去处理呢？
②代码记录如下：
url : ***.action,
type : 'post',
dataType : 'json',
contentType : application/x-www-form- charset=utf-8,
'name' : name,
'type' : type
success : function(data) {
$(#lianxiang).empty();
var mydiv = document.getElementById(lianxiang);
var arr = new Array();
if(arr.length==0){
document.getElementById('lianxiang').innerHTML='
未找到相关站点或线路';
if (arr.length & 0) {
for ( var j = 0; j & arr. j++) {
var arr_l = new Array();
arr_1 = arr[j];
var divone = document.createElement(div);
if(j%2==0){
divone.setAttribute(class,ui-block-a);
divone.setAttribute(class,ui-block-b);
var divtwo = document.createElement(div);
divtwo.setAttribute(class,bus_zp_list_more_01);
var aa = document.createElement(a);
aa.setAttribute(href,#);
var span = document.createElement(span);
span.innerHTML = arr_1[2];
divtwo.id =
aa.appendChild(span);
divtwo.appendChild(aa);
divone.appendChild(divtwo);
mydiv.appendChild(divone);
divtwo.onclick = function() {
var idnum = $(this).attr('id');
ewohobustwo(data[idnum][0], data[idnum][1],
data[idnum][2], data[idnum][3]);
error : function() {
alert(网络忙，请再次尝试哦!);
其中首先找到父节点mydiv ，然后采用 var divone = document.createElement(div)的方式创建新的节点（这里可以使div、span、a等各种），同样可以对新创建的节点添加新的css、点击事件、id等，最后将这些新的节点元素一点点添加到父级元素即可完成动态元素的创建添加；
（二）html覆盖层的添加
①需要在页面引入一下html
// // // // // // // //
进行中，请稍后...
②加入对应的lodeing的css
#BgDiv1{background-color:#000; position: z-index:9999;
display:left:0 top:0 width:100%; height:100%;opacity: 0.6; filter: alpha(opacity=60);}
.DialogDiv{position:z-index:99999;}
.U-user-login-btn{ display: border: background:url(images/bg_mb_btn1_1.png) repeat-x; font-size:1 color:# line-height:49 cursor: height:53 font-weight:
border-radius:3
-webkit-border-radius: 3
-moz-border-radius: 3
width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #}
.U-user-login-btn:hover, .U-user-login-btn:active{ display: border: background:url(images/bg_mb_btn1_1_h.png) repeat-x; font-size:1 color:# line-height:49 cursor: height:53 font-weight:
border-radius:3
-webkit-border-radius: 3
-moz-border-radius: 3
width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #}
.U-user-login-btn2{ display: border:background:url(images/bg_mb_btn1_1_h.png) repeat-x;
font-size:1 color:# line-height:49 cursor: font-weight:
border-radius:3
-webkit-border-radius: 3
-moz-border-radius: 3
width:100%; box-shadow: 0 1px 4px #cbcacf, 0 0 40px #height:53}
.U-guodu-box { padding:5px 15
background:#3c3c3f; filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;
min-heigh:200 border-radius:10}
.U-guodu-box div{ color:# line-height:20 font-size:12 margin:0 height:100%; padding-top:10%; padding-bottom:10%;}
③下面两个js方法实现了对覆盖层的展示和隐藏
function showlode() {
$(#BgDiv1).css({
display : block,
height : $(document).height()
var yscroll = document.documentElement.scrollT
var screenx = $(window).width();
var screeny = $(window).height();
$(.DialogDiv).css(display, block);
$(.DialogDiv).css(top, yscroll + px);
var DialogDiv_width = $(.DialogDiv).width();
var DialogDiv_height = $(.DialogDiv).height();
$(.DialogDiv).css(left, (screenx / 2 - DialogDiv_width / 2) + px);
$(.DialogDiv).css(top, (screeny / 2 - DialogDiv_height / 2) + px);
$(body).css(overflow, hidden);
function hidelode() {
$(#BgDiv1).css({
display : none,
height : $(document).height()
var yscroll = document.documentElement.scrollT
var screenx = $(window).width();
var screeny = $(window).height();
$(.DialogDiv).css(display, none);
$(.DialogDiv).css(top, yscroll + px);
var DialogDiv_width = $(.DialogDiv).width();
var DialogDiv_height = $(.DialogDiv).height();
$(.DialogDiv).css(left, (screenx / 2 - DialogDiv_width / 2) + px);
$(.DialogDiv).css(top, (screeny / 2 - DialogDiv_height / 2) + px);
$(body).css(overflow, hidden);
以上基本记录了js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加，方便自己查阅！
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'js 基础篇（点击事件轮播图的实现）
来源：博客园
轮播图在以后的应用中还是比较常见的，不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下，怎么来用较少的而且逻辑又简单的方法来实现呢？下面来分析下几种不同的做法：
1、利用位移的方法来实现
　　首先，我们可以在body中添加一个div并且将宽度设置成百分比（自适应页面），比例具体是相对谁的百分比的话按需求来做，在这里不多说。将图片放入到div 中。
　　其次，样式部分将img标签全部设置成absolute；以方便定位
　　最后，js部分说说逻辑，定义两个空数组，第一个数组用来保存初始的显示在页面的图片和等待进入的图片，第二个数组保存其余的n张图片，假设这两个数组分别设置为：waitToShow=[]; 和 goOut=[];
waitToShow.shift();弹出第一张图片假如命名为showFirst，并为showFirst图片设置位移和移动时间，执行完成之后showFirst放入goOut尾部：goOut.push(showFirst);
这时waitToShow数组的第0个元素就变成原来的第二张要显示的图片，给这个图片waitToShow[0]设置位移和移动时间，并且将goOut数组的首元素图片弹出来，在放进waitToShow数组的尾部，保证waitToShow数组永远是一张显示的图片和待显示的图片，这样就通过两个数组形成了一个循环来完成轮播图的实现。反向的逻辑是一样的（由于逻辑过于复杂这里不推荐）
2、利用层级的高低来使最顶部图片变化的做法（这个做法没有位移的动作，但是逻辑却非常简便，很实用）
　　直接来代码更直观点：基本每行都有注释
&!DOCTYPE html&&html&
&meta charset="utf-8"&
&title&轮播图 (闪现 自适应)&/title&
&style media="screen"&
margin: 0;
padding: 0;
width: 60%;
background:
.wrap img {
width: 100%;
/*z-index: 10;*/
height: 30
background:
border-radius: 5
font-size: 20
&div class="wrap"&
&img src="img/01.jpg" alt="" /&
&img src="img/02.jpg" alt="" /&
&img src="img/03.jpg" alt="" /&
&img src="img/04.jpg" alt="" /&
&input type="button" id="butLeft" name="name" value="?"&
&input type="button" id="butRight" name="name" value="?"&
&script type="text/javascript"&
// 获取images元素生成字符串数组，字符串数组不能进行push
splice 等操作
// 所以要将它的值重新存放进一个数组中，后面有定义
var images = document.getElementsByTagName('img');
var butLeft = document.getElementById('butLeft');
var butRight = document.getElementById('butRight');
//获取变量index
用来为后面设置层级用
var index = 1000;
// 获取一个空的数组，用来存放images里面的字符串元素
var imagess = [];
// for循环用来给imagess数组赋值，并且改变数组中的元素的层级
for (var i = 0; i & images. i++) {
imagess[i] = images[i];
var currentImage = imagess[i];
// 当前图片的层级的设置，一轮for循环都为他们设置了初始的zIndex，图片越靠前，层级设置
// 要求越高，所以用的是－i,这样图片会按顺序从第一张，第二张.....依次向下
currentImage.style.zIndex = -i;
// 设置计数器count，执行一次点击事件（向左或者向右）count加1
var count = 0;
// 向左的点击事件
butLeft.onclick = function() {
// 从数组头部弹出一个图片元素
var showFirst = imagess.shift();
// 给弹出的这个图片元素设置层级，即 －1000+count，
// 让层级相较其他元素是最小的，数组头部弹出的图片会显示在最底层
showFirst.style.zIndex = - index +
// 层级改变完成后再将他push进数组的尾部
imagess.push(showFirst);
// 点击一次加1，不用考虑具体的值，只需要有点击事件加 1
// 向右点击事件
butRight.onclick = function() {
// 从imagess的尾部弹出一个元素，并赋值给showFirst
var showFirst = imagess.pop();
// 设置showFirst的层级为最大，1000+count ，这样他会显示在第一层
showFirst.style.zIndex = index +
// 层级改变之后将他在插入数组imagess的头部
imagess.unshift(showFirst);
// 点击一次加1
&/script&&/html&
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动