导航:首页 > 文件教程 > raphaeljs教程

raphaeljs教程

发布时间:2023-01-16 03:25:43

❶ 怎样把svg文档转换成raphael js代码 或者给个raphael js的教程,中文文档也行。

raphael-svg-import 据说来这自个可以

https://github.com/wout/raphael-svg-import

jQuery(document).ready(function(){
jQuery.ajax({
type: "GET",
url: "assets/demo.svg",
dataType: "xml",
success: function(svgXML) {
var paper = Raphael(10, 10, 800, 600);
var newSet = paper.importSVG(svgXML);
}
});
});

❷ Raphael js 怎么加载vml的数据

raphael-svg-import

❸ <script src="js/raphael.2.1.0.min.js"></script> 提示说这行代码有错,求大神解答

1.屏蔽这个行,看看还有错吗?

2.试试替换最新版本,MSDN上找了个(不确定是不最新),你也可以试试找找。

(function(b){functiond(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}this.input.addClass("placeholder");this.input[0].value=this.input.attr("placeholder")}},
hide:function(){if(this.valueIsPlaceholder()&&this.input.hasClass("placeholder")&&(this.input.removeClass("placeholder"),this.input[0].value="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){returnthis.input[0].value==this.input.attr("placeholder")},handlePassword:function(){vara=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){varc=b(a[0].outerHTML.replace(/type=(['"])?password1/gi,
"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};vare=!!("placeholder"indocument.createElement("input"));b.fn.placeholder=function(){returne?this:this.each(function(){vara=b(this),c=newd(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}),
a.focus(function(){if(this.value==""){vara=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery);

3.代码哪里下的,有地址可以看么?

❹ 有什么js库可以提供交互绘图时可以自动吸附闭合,时时检测是否垂直是否平行,时时显示角度,长度的

常用的js绘图库有:

❺ 请教JS类库 Raphael 如何在绘图的时候 给图形加文字

paper.text(x,y,"text");调整x,y的值,x,y为相应的字体位置,它就可以绘制在矩形中了

javaScript怎样做出一个画圆圈的效果啊,比如一张图片是一个小圆点,怎样让这个小圆点以20p

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>画圆</title>
<scriptsrc="http://apps.bdimg.com/libs/raphael/2.1.2/raphael-min.js"></script>
</head>
<body>

<divid="holder"></div>
<script>
varpaper=Raphael("holder",400,400);
varcircle=paper.circle(200,200,150);//从200,200开始画一个半径版150的圆
circle.attr("fill","#f00");//并用红色填权充
</script>
</body>
</html>

❼ js对html的表格处理完后,如何刷新能得到处理后的数据

需要再描述清楚点
处理后的数据是在数据库(用ajax取过来填充到表格中) 如果是在客户端内存中比如json数据直接分析填充表格,如果是因为第三方脚本引起的错误 就需要贴代码 看了

❽ raphael js-Raphael.js用path方法绘制图.是怎么做到的

没有学过该库。不过可以猜想一下,基于js的话,js中绘图是基于canvas元素的。版而canvas中的话,path方法估权计就是基于这个:

beginPath();
lineTo(坐标)
closePath().

具体的话,可以参看w3c的教程中有关canvas部分。

❾ jQuery SVG 中国地图 raphael.js 如何修改才能把 悬停弹出框 改为点击弹出框

把事件触发改成click

❿ 如何绘制current state map

我们需要准备一张矢量地图,可以从网上找一张矢量地图,或者使用illustrator绘制一份矢量地图,然后导出为SVG格式的文件,这个文件可以在浏览器上打开,然后提取里面的path路径信息(M开头的坐标)。并将path路径信息,按照chinamapPath.js的格式准备好地图路径信息。

var china = [];

function paintMap(R) {
var attr = {
"fill": "#97d6f5",
"stroke": "#eee",
"stroke-width": 1,
"stroke-linejoin": "round"
};

china.aomen = {
name: "澳门",
path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr)
}
china.hk = {
//格式同上
};
}

以上是我们将准备好的地图路径信息封装到()函数中,并保存文件名为chinamapPath.js,供后面调用。
HTML
首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地图的位置放置div#map。

<div id="map"></div>

JAVASCRIPT
首先我们在页面中调用地图,方法如下:

window.onload = function () {
//绘制地图
var R = Raphael("map", 600, 500);//将地图载入到id为map的div中,并设置区域为600x500px大小。
paintMap(R);
}

这个时候我们用浏览器打开会显示载入后的地图。接下来我们要给地图中的对应的省份区域加上省份名称,以及鼠标滑向每个省份区块时的变色动画效果。

window.onload = function () {
var R = Raphael("map", 600, 500);
//调用绘制地图方法
paintMap(R);

var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
};

for (var state in china) {
china[state]['path'].color = Raphael.getColor(0.9);

(function (st, state) {

//获取当前图形的中心坐标
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);

//写入文字
china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);

st[0].onmouseover = function () {//鼠标滑向
st.animate({fill: st.color, stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};
st[0].onmouseout = function () {//鼠标离开
st.animate({fill: "#97d6f5", stroke: "#eee"}, 500);
china[state]['text'].toFront();
R.safari();
};

})(china[state]['path'], state);
}
}

以上代码中运用了raphael提供的方法有:getColor,getBBox,animate,toFront等等,这些可以在raphael文档中找到使用说明,本文不在讲述。
此外由于地图尺寸原因,有些省份名称在地图中的显示位置不恰当,需要修正偏移量,这样看起来舒服点。

阅读全文

与raphaeljs教程相关的资料

热点内容
微信视频不能转发朋友圈 浏览:596
影视后期的app有哪些 浏览:956
电子保单数据出错什么意思 浏览:368
如何以文件下载音乐 浏览:438
计算机网络章节练习 浏览:999
单片机的外部中断程序 浏览:48
表格批量更名找不到指定文件 浏览:869
js的elseif 浏览:584
3dmaxvray视频教程 浏览:905
imgtool工具中文版 浏览:539
java帮助文件在哪里 浏览:965
win10切换输入语言 浏览:696
haier电视网络用不了怎么办 浏览:361
苹果6手机id怎么更改 浏览:179
米家扫地机器人下载什么app 浏览:82
如何在编程猫代码岛20种树 浏览:915
手机基础信息存储在哪个文件 浏览:726
如何查找手机备份文件 浏览:792
内存清理工具formac 浏览:323
iphone过滤骚扰电话 浏览:981

友情链接