❶ 怎樣把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繪圖庫有:
D3.js:一個功能強大的數據可視化庫,支持吸附閉合等功能。
Raphael.js:一個輕量級的交互繪圖庫,支持實時顯示角度和長度。
Fabric.js:一個強大的交互繪圖庫,支持實時檢測垂直和平行等功能。
p5.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文檔中找到使用說明,本文不在講述。
此外由於地圖尺寸原因,有些省份名稱在地圖中的顯示位置不恰當,需要修正偏移量,這樣看起來舒服點。