熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

基於SVG的web頁面圖形繪制API介紹及編程演示

2013-11-15 12:14:28  來源: JSP教程 
SVG的全稱是可擴展的矢量圖形跟傳統的Raster方式的圖形(JPG PNG GIF等)有很大的差別下面與大家分享下JavaScript中SVG API編程演示感興趣的朋友可以參考下哈   什麼是SVG
SVG是由WC發布的D圖形描述語言純基於XML格式的標記語言SVG的
全稱是可擴展的矢量圖形跟傳統的Raster方式的圖形(JPG PNG GIF等)有很大的差
SVG是D圖形開發平台包括兩個部分一個是基於XML語言的數據描述
外一部分是可編程的API其關鍵特性支持圖形文本梯度填充畫筆風格圖形
特效濾鏡如高斯模糊會在稍後的代碼中演示同時還支持各種鼠標事件與DOM部
分API幾乎所有的主流浏覽器都支持SVG圖形格式的現實與繪制IE+以上也開始
支持SVG在低版本的IE中需要插件支持
更多了解SVG訪問這裡

JavaScript中SVG API編程演示
創建與獲取SVG對象
復制代碼 代碼如下:
// create svg object
var mySvg = documentcreateElementNS(""svg");
mySvgsetAttribute("version""");// IE+ support SVG version
mySvgsetAttribute("baseProfile""tiny");
containerappendChild(mySvg);
在SVG中創建一個矩形圖形
復制代碼 代碼如下:
var c = documentcreateElementNS(""rect");
csetAttribute("x""");
csetAttribute("y""");
csetAttribute("width""");
csetAttribute("height""");
csetAttribute("fill""rgb()");
csetAttribute("stroke""rgb()");
csetAttribute("strokewidth""");
mySvgappendChild(c);
在SVG中實現文本繪制
復制代碼 代碼如下:
// SVG draw text
var stext = documentcreateElementNS(""text");
stextsetAttribute("x""");
stextsetAttribute("y""");
stextsetAttribute("fontsize""px");
stextsetAttribute("fill""#FF");
var textString = documentcreateTextNode("Hello SVG");
stextappendChild(textString);
mySvgappendChild(stext);
在SVG對象上實現鼠標點擊事件處理與MouseUp事件處理
復制代碼 代碼如下:
// mouse event handling
caddEventListener("click"changeColorfalse);
caddEventListener("mouseup" changeColorfalse);
通過SVG 圖形濾鏡實現高斯模糊
復制代碼 代碼如下:
<div id="blurimagedemo">
<div id="left" style="width:%;"><img src="woniupng" alt="Original image" width="" height=""></div>
<div id="right" style="width:%;">
<svg xmlns="
<defs>
<filter id="f" x="" y="">
<feGaussianBlur in="SourceGraphic" stdDeviation="" />
</filter>
</defs>
<image x="" y="" width="" height="" xlink:href="woniupng" filter="url(#f)"/>
</svg>
</div>
</div>
運行效果
 
源代碼可以copy直接運行
JavaScript部分
復制代碼 代碼如下:
windowonload = function() {
// get DIV
var container = documentgetElementById("svgContainer");
// create svg object
var mySvg = documentcreateElementNS(" "svg");
mySvgsetAttribute("version" "");// IE+ support SVG version
mySvgsetAttribute("baseProfile" "tiny");
containerappendChild(mySvg);

// create svg shape rectangle
var c = documentcreateElementNS(" "rect");
csetAttribute("x" "");
csetAttribute("y" "");
csetAttribute("width" "");
csetAttribute("height" "");
csetAttribute("fill" "rgb()");
csetAttribute("stroke" "rgb()");
csetAttribute("strokewidth" "");
mySvgappendChild(c);

// create svg shape circle
var c = documentcreateElementNS(" "circle");
csetAttribute("cx" "");
csetAttribute("cy" "");
csetAttribute("r" "");
csetAttribute("fill" "#");
csetAttribute("stroke" "#AAFF");
csetAttribute("strokewidth" "");
mySvgappendChild(c);

// create svg shape ellipse
var c = documentcreateElementNS(" "ellipse");
csetAttribute("cx" "");
csetAttribute("cy" "");
csetAttribute("rx" "");
csetAttribute("ry" "");
csetAttribute("fill" "#FF");
csetAttribute("stroke" "purple");
csetAttribute("strokewidth" "");
mySvgappendChild(c);

// create svg shape draw lines
for(var i=; i<; i++)
{
var sline = documentcreateElementNS(" "line");
var x = + i*;
consolelog(x);

slinesetAttribute("x" xtoString());
slinesetAttribute("y" "");
slinesetAttribute("x" xtoString());
slinesetAttribute("y" "");
slinesetAttribute("stroke" "rgb()");
slinesetAttribute("strokewidth" "");
mySvgappendChild(sline);
}

// SVG draw text
var stext = documentcreateElementNS(" "text");
stextsetAttribute("x" "");
stextsetAttribute("y" "");
stextsetAttribute("fontsize" "px");
stextsetAttribute("fill" "#FF");
var textString = documentcreateTextNode("Hello SVG");
stextappendChild(textString);
mySvgappendChild(stext);

// mouse event handling
caddEventListener("click" changeColor false);
caddEventListener("mouseup" changeColor false);
};
function changeColor(evt) {
var target = evttarget;
targetsetAttributeNS(null "fill" "green");
}
HTML部分
復制代碼 代碼如下:
<html>
<head>
<title>Gloomyfish SVG Demo</title>
<style>
#svgContainer {
width:px;
height:px;
backgroundcolor:#EEEEEE;
}
#left { float: left;}
#right { float: right;}
</style>
</head>
<body>
<div id="svgContainer"></div>
<div id="blurimagedemo">
<div id="left" style="width:%;"><img src="woniupng" alt="Original image" width="" height=""></div>
<div id="right" style="width:%;">
<svg xmlns="
<defs>
<filter id="f" x="" y="">
<feGaussianBlur in="SourceGraphic" stdDeviation="" />
</filter>
</defs>
<image x="" y="" width="" height="" xlink:href="woniupng" filter="url(#f)"/>
</svg>
</div>
</div>
</body>
</html>  
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20558.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.