现在位置首页 / 前端开发 /正文

zrender教程-图形shape旋转及点击事件参数

作者: IT小兵 | 2014年5月4日| 热度:℃ | 评论: |参与:

昨天在五一放假的最后一天,写了一篇关于zrender初步教程,主要说明如何搭建环境及配置.

在部署完成后,我们肯定需要完成一定的业务功能才是正事。

今天先说明一下,怎么添加一个zrender图形-shape,并对shape的事件(点击)做一下参数分析。

我们要做的功能:

在演示中,我们就会添加一个多边形,并对它进行旋转,使他变成左右箭头。当点击的时候,上面的时间轴,会左右滑动数据。

如图:

1、如何添加shape:

首先,我们添加2个三角形。

参考zrender的添加多边形的方法,有一下代码:

左边三角形。这时候,我们需要把多边形进行一下偏转。使用  rotation: [tenDeg, 5, zrheight-55]属性。参考:

ZRender  rotation

http://ecomfe.github.io/zrender/doc/doc.html#shape.base.rotation 

   // 正n边形
    var tenDeg = Math.PI / 2;//角度/360*2PI 
    var origin = tenDeg;
    zr.addShape({
        shape: 'isogon',
        rotation: [tenDeg, 5, zrheight-55],
        style: {
            x: 50,
            y: zrheight-30,
            r: 30,
            n: 3,
            color: 'rgba(135, 206, 250, 0.8)',
            text: '',
            textPosition: 'inside'
        },
        clickable: true,
        onclick: function (params) {
            //origin += tenDeg;
            //zr.modShape(params.target.id, { rotation: [origin, 50, 380] });
            //zr.refresh();
            $.each(TimeNodeList, function (key, shape) { 
                SetNodeStyle(shape, 90); 
            });
            zr.update(TimeList, function () {
                //    alert('update finished')
            })
            return true;    // 阻塞全局zrender事件
        }
    });

  var tenDeg = Math.PI / 2;是旋转90.var tenDegyou = Math.PI / 4;旋转270度。


这里需要补充一下知识,反正我是脑子里不记这个的。

三角形角的度量与换算
1.角度制
整个圆周的1/360的弧称为1度的弧,1度弧所对的圆心角称为1度的角,记为1°.
1度等于60分 (记为1°=60′);
1分等于60秒 (记为1′=60″)
2.弧度制
等于半径长的弧称为含有1弧度的弧,1弧度所对的圆心角称为1弧度的角(记为1或1r)
3.圆周率
圆的周长与直径的比值称为圆周率,用表示.
=3.141592653589793...
我国古代南朝的数学家祖冲之已算出的值为3.1415925<<3.1415927
4.度与弧度的换算
*由角度、弧度、圆周率的定义,可知
*圆周对的圆心角的弧度为2,角度为360°
*半圆周对的圆心角的弧度为,角度为180°
*弧度与角度的换算关系为: ,其中θ与α分别表示同一角的度数与弧度
1r=57.29577951°  ;1°=0.017453293r
常用特殊角的度数与弧度换算360°=2,180°=,

2、事件处理:

 clickable: true,
        onclick: function (params) {
            
            $.each(TimeNodeList, function (key, shape) { 
                SetNodeStyle(shape, 90); 
            });
            zr.update(TimeList, function () {
                //    alert('update finished')
            })
            return true;    // 阻塞全局zrender事件
        }

参数params:有多个参数可以使用:

默认为null,当前图形点击响应,回传参数和有效返回值见下
参数类型描述
eventPacket    {Object}    事件包,结构如下    
eventPacket.type    {string}    事件类型为EVENT.CLICK    
eventPacket.event    {event}    原始dom事件对象    
eventPacket.target    {Object}    当前图形shape对象    
返回值类型描述
true | false    {boolean}    回调返回,true(阻塞全局zrender事件)| false(不阻塞全局zrender事件)
无返回值,等同返回false

通过event 可以获取到点击的鼠标位置,可以采用zrender自带的tool包,获取到位置信息。

  var eventTool = require('zrender/tool/event');
  eventx = eventTool.getX(params.event);
  eventy = eventTool.getY(params.event);


转发注明:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询