• Raphaeljs入门到精通(二)


    这节我们将介绍Raphaeljs中元素的属性和事件,案例还是以上一篇的代码展开

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Script/raphael.js"></script>
    </head>
    <body>
        <div id="paper">
    
        </div>
        <script>
            //创建一个画布
            var paper = new Raphael("paper", 500, 500);
            //画圆
            var circle = paper.circle(50, 50, 40);
            circle.attr({
                "stroke": "red",
                "stroke-width": 4,
                "fill": "blue"
            });
            //或者写法
            circle.attr("opacity",0.5);
            //画圆角方形
            var rect = paper.rect(90, 90, 50, 50, 10);
            
        </script>
    </body>
    </html>
    
    paper中给元素加入属性是使用attr方法,能够一次加入多个,也能够单个加入。

    元素的属性有下面:

    cursor (光标颜色),cx,cy (园或者椭圆 圆心点坐标),fill(填充颜色),fill-opacity (滤镜),font,font-family,font-size,font-weight,height

    href,opacity,path,src,stroke,stroke-dasharray,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width

    target,text,text-anchor,title,transform,width,x,y等等

    假设是想设置元素的style的话能够使用element.node属性来获得当前元素解析到浏览器中之后的标签,然后再使用jquery进行设置。

    元素的事件:

    Raphaeljs元素一般具有例如以下事件:

    1.click 单击事件;

    2.dbclick 双击事件。

    3.drag事件,元素拖动事件;

    3.hide 隐藏事件;

    4.hover 悬浮事件;

    5.mousedown 鼠标按下

    6.mouseout 鼠标移出事件

    7.mouseover  ,mouseup 送掉事件。

    解除事件的方式例如以下:

    1.unclick

    2.undbclick

    3.unmousedown

    4.等等在绑定事件的词前面加上前缀词un即可了。

    当然元素事件和属性也是通过元素.node来设置。

    以下我们详细看一个案例,当鼠标移入圆的时候改变圆的填充颜色,移出的时候又恢复原来的颜色


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Script/raphael.js"></script>
    </head>
    <body>
        <div id="paper">
    
        </div>
        <script>
            //创建一个画布
            var paper = new Raphael("paper", 500, 500);
            //画圆
            var circle = paper.circle(50, 50, 40);
            circle.attr({
                "stroke": "red",
                "stroke-width": 4,
                "fill": "blue"
            });
            circle.mousedown(function () {
                circle.attr("fill", "red");
            });
            circle.mouseup(function () {
                this.attr("fill", "blue");
            });
            //或者写法
            circle.attr("opacity", 0.5);
            //画圆角方形
            var rect = paper.rect(90, 90, 50, 50, 10);
            rect.attr({
                "stroke": "red",
                "stroke-width": 4,
                "fill": "blue"
            });
            rect.attr("opacity", 0.5);
            rect.mousemove(function () {
                rect.attr("fill", "gray");
            });
            rect.mouseout(function () {
                this.attr("fill", "blue");
            });
    
        </script>
    </body>
    </html>
    

    效果图例如以下:






  • 相关阅读:
    Task Scheduler Error and Success Constants (Windows)
    Error 2147943712 during task creation
    How to: Fix a network printer suddenly showing as offline in Windows Vista, 7 or 8 « Robin's Blog
    PowerShell监控Windows打印服务器
    Office 2010 KMS激活原理和案例分享
    Office and Windows KMS使用帮助
    [转自开心软件园]解读“剩余 Windows 重置计数”和“信任时间”
    KMS错误代码收集
    Unattend.xml应答文件制作(WISM)-- 转自爱做梦的鱼
    Acronis True Image Home 2011 PXE服务器配置_qxxz_新浪博客
  • 原文地址:https://www.cnblogs.com/mthoutai/p/6913973.html
Copyright © 2020-2023  润新知