相对传统桌面设计器,葡京在线开户在线报表设计器价值何在?

– 自动更新

葡京在线开户 1

历史观的设计器在厂商发表了新效用后,往往需要再行下载及安装配备,但在线设计器的法力提升完全在服务端完成,客户无需繁琐的手续即可体验新增效能。

贝塞尔曲线

先来看两组图,有助于明白什么是贝塞尔曲线葡京在线开户 2(图片取自维基百科,参考链接1)

二次贝塞尔曲线:

葡京在线开户 3葡京在线开户 4

P0是起点,P2是极端,P1是控制点

一次贝塞尔曲线:

葡京在线开户 5葡京在线开户 6

 P0是起源,P3是终端,P1是控制点1,P2是决定点2

各类连接所有点,组成线段

t是比例,在0-1之内,就是每条线段的长度都是1

贝塞尔曲线就是最里层的线条在t地点的点所组成的门径

五次贝塞尔曲线公式:B(t)=(1-t)^3*P0+3(1-t)^2*t*P1+3(1-t)*t^2*P2+t^3*P3,0<=t<=1

B(t)表示曲线上任意点,P0,1,2,3分别代表决定曲线的4个点,t代表曲线长度为1的自由取值

与传统桌面设计器紧要区别

振动动画

鉴于圆是被12个点控制的,让圆抖动,也就是对12个点做点动画

可以用关键帧动画,这样控制的可比密切,要专注的是,衔接的地方要平滑.我那边做的可比简陋,就找了一个转换后的图纸,重复了5次.尽管你有趣味,可以多做些,做的越多,动画看起来表现力越强

这边我并不曾去探究什么算法,就是简单的在blend里,找了一部分点

见代码:

葡京在线开户 7葡京在线开户 8

 1 <EventTrigger RoutedEvent="Click">
 2     <BeginStoryboard>
 3         <Storyboard>
 4             <PointAnimationUsingKeyFrames Storyboard.TargetName="pf_main" Storyboard.TargetProperty="StartPoint" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
 5                 <EasingPointKeyFrame Value="40,0" KeyTime="0:0:0.2"></EasingPointKeyFrame>
 6             </PointAnimationUsingKeyFrames>
 7             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
 8                 <EasingPointKeyFrame Value="68,-10" KeyTime="0:0:0.2"></EasingPointKeyFrame>
 9             </PointAnimationUsingKeyFrames>
10             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
11                 <EasingPointKeyFrame Value="115,14" KeyTime="0:0:0.2"></EasingPointKeyFrame>
12             </PointAnimationUsingKeyFrames>
13             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main0" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
14                 <EasingPointKeyFrame Value="100,66" KeyTime="0:0:0.2"></EasingPointKeyFrame>
15             </PointAnimationUsingKeyFrames>
16             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main1" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
17                 <EasingPointKeyFrame Value="100,67" KeyTime="0:0:0.2"></EasingPointKeyFrame>
18             </PointAnimationUsingKeyFrames>
19             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main1" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
20                 <EasingPointKeyFrame Value="85,111" KeyTime="0:0:0.2"></EasingPointKeyFrame>
21             </PointAnimationUsingKeyFrames>
22             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main1" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
23                 <EasingPointKeyFrame Value="33,103" KeyTime="0:0:0.2"></EasingPointKeyFrame>
24             </PointAnimationUsingKeyFrames>
25             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
26                 <EasingPointKeyFrame Value="22,103" KeyTime="0:0:0.2"></EasingPointKeyFrame>
27             </PointAnimationUsingKeyFrames>
28             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
29                 <EasingPointKeyFrame Value="-15,85" KeyTime="0:0:0.2"></EasingPointKeyFrame>
30             </PointAnimationUsingKeyFrames>
31             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main2" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
32                 <EasingPointKeyFrame Value="-6,50" KeyTime="0:0:0.2"></EasingPointKeyFrame>
33             </PointAnimationUsingKeyFrames>
34             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point1" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
35                 <EasingPointKeyFrame Value="4,9" KeyTime="0:0:0.2"></EasingPointKeyFrame>
36             </PointAnimationUsingKeyFrames>
37             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point2" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
38                 <EasingPointKeyFrame Value="41,-1" KeyTime="0:0:0.2"></EasingPointKeyFrame>
39             </PointAnimationUsingKeyFrames>
40             <PointAnimationUsingKeyFrames Storyboard.TargetName="bs_main3" Storyboard.TargetProperty="Point3" BeginTime="0:0:0.7" AutoReverse="True" RepeatBehavior="5x" FillBehavior="Stop">
41                 <EasingPointKeyFrame Value="42,0" KeyTime="0:0:0.2"></EasingPointKeyFrame>
42             </PointAnimationUsingKeyFrames>
43         </Storyboard>
44     </BeginStoryboard>
45 </EventTrigger>

View Code

观念桌面报表设计器是指需要在系统中安装,并透过桌面快捷模式打开的设计器。依据不同的系列,需要设置相应的设计器软件,同时在哪个设备上安装,就只可以在哪些设备上应用。

连带文化

那有些基本就是废话,网上都能找到,我只但是是整治了以下.提议先不看,用到的时候可以回到看看

– 所见即所得

葡京在线开户 9

观念的表格设计器在成就计划后,需要不停的展开发布,在最后用户的浏览环境中查阅设计功效,功效特别下垂。而在线报表设计器在计划时即可预览最后效果,随时修改规划,设计效用大大提高。

 

此外知识

没接触过贝塞尔曲线的话,可能得花些时间整治下,其他的学识就相比较简单了

葡京在线开户 10

直角三角形,角A的对边a,临边b,斜边c

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

– 跨平台

葡京在线开户 11

面对不同的设备,如桌面电脑、surface及手持设备,传统设计器需要面对不同装备终端揭橥不同的本子,但在线设计器而因自发的多平台扶助,无需过多考虑平台特色,利用当前最流行的HTML5技术,在不同的平台上

为用户提供几乎一致的宏图经验,而相对传统设计器,更不设有因效应提高而带来的版本混乱问题。

item

– 报表开发人士

在线设计器的推出使得报表的开发设计也进入的协同工作的时期,相对于事先报表的效率、设计、美化工作只好按序完成,而且所有人的设计器版本还需要联合,避免现身不均等的动静。

而在线设计的特性使得这些工作的交互成为可能,确定需要后,建立报表的基本框架,然后交由图画人士成功UI设计,而开发人员可以小心于数据准备及团队,

终极将效率与数据统一,举行末段的发布。并且,所有这么些干活儿无需我们集中,随时随地都可做到,真正的提升了工作效能。

转载请声明来源:葡萄城报表

 

相关阅读:

在线报表设计实战体系–
制作表格类报表

在线报表设计实战系列–
矩表高级应用

在线报表设计实战类别–
制作复杂表头报表

 

Path画法

重点的大圆是个ToggleButton,替换模版,背景换成贝塞尔曲线组成的圆.

各样贝塞尔曲线的源点和终极就不说了,分外简单,这里根本说说控制点.

葡京在线开户 12

算算出1/4圆弧的高中级地方的点,此时t=0.5, 三角型边长h=sin45*r

让决定点P1,P2分别在起源和终端的切线上,P1到X轴的相距等于P2到Y轴的距离L

B(0.5)=h=sin45*r=(1-0.5)^3*0+3*(1-0.5)^2*0.5*L+3*(1-0.5)*0.5^2*r+0.5^3*r

sin45*r=0+0.375*L+0.375*r+0.125*r

L=(sin45*r-0.5*r)/0.375

于是五个控制点(r,L)和(L,r)可以规定

求出来的两个点是数学的坐标,要转换成程序的坐标,对应成4个象限,无非就是加减半径,加减L,不细说了

完整的path,取半径是50,见代码

葡京在线开户 13葡京在线开户 14

 1 <Path>
 2     <Path.Data>
 3         <PathGeometry>
 4             <PathFigure StartPoint="50,0">
 5                 <BezierSegment Point1="77.614237491541,0" Point2="100,22.385762508459" Point3="100,50"></BezierSegment>
 6                 <BezierSegment Point1="100,77.614237491541" Point2="77.614237491541,100" Point3="50,100"></BezierSegment>
 7                 <BezierSegment Point1="22.385762508459,100" Point2="0,77.614237491541" Point3="0,50"></BezierSegment>
 8                 <BezierSegment Point1="0,22.385762508459" Point2="22.385762508459,0" Point3="50,0"></BezierSegment>
 9             </PathFigure>
10         </PathGeometry>
11     </Path.Data>
12 </Path>

View Code

而在线报表设计器则是指无需安装,通过各项设施的浏览器就能在线应用的表格设计器,完全铲除了桌面设备、移动装备等不等平台的限定。

概括介绍

其一职能难点就两有些:一是水球分离和融合时候的连天,二是主导圆的振动

可是实际上网上都有化解方案了

率先部分是在六个圆之间加个用贝塞尔曲线组成的path,用平等的水彩,其实是障眼法.见参考链接4

第二片段是用4段两回贝塞尔曲线组成的path代替Ellipse,因为Ellipse是振动不起来的,这样就可以控制贝塞尔曲线的点来让圆抖动.见参考链接3

– 系统集成商

对此系统集成商来说,功用和推行周期的确是一个品类成败的第一,而在线报表设计器的过多表征都能大幅度的增进项目成功的或许。

无论售前形成需求原型,亦可能发表后修改新增的要求,集成商都可因而在线设计器急忙验证用户要求,并诚邀用户通过浏览器即时的肯定,以连忙专业的响应措施获取最后用户认同,同时也大幅度的降落售前及售后成本,提高盈利!

按钮的地方

甭管是奇数个,仍然偶数个,我们都想让它以Y轴对称

第一把圆分成8等份,每一份都是45度,也就是最六只可以放下8个item,

葡京在线开户 15

 

从上图可以看出来,其实就是奇数个在线上,偶数个在两线之间

有个大概的点子,就是先在终极依次顺时针排列,每个item间隔45度,然后再逆时针旋转,每多一个item就多转45/2度(两条分割线是45度,中间也就是45/2度),如下图:

葡京在线开户 16

 上图是item终点的职位,起源的职位是在圆心.

卡通用DoubleAnimation控制item按钮的移位,从圆心移动到总计后的职位

 统计地方的代码:

//函数是弧度制 2PI是360度
a = c * Math.Sin(2 * Math.PI / 8 * i – (itemsSource.Count – 1) * 2
* Math.PI / 8 / 2);
b = c * Math.Cos(2 * Math.PI / 8 * i – (itemsSource.Count – 1) * 2
* Math.PI / 8 / 2);

 

效果图

葡京在线开户 17

 

– 最后用户

在线报表设计器以类OFFICE的界面风格及操作习惯,并巧妙地经过分类、向导、智能提示等艺术将本来只有正规人士才能领会的错综复杂报表设计编程人人可用的简单工具,从而使得实时响应工作要求的改动成为可能。

主导的大圆

正文通过对照两种设计器紧要特征及应用处境,意在认证在线报表设计器对此报表用户的市值所在。

水球连接的一部分

连接的一些是用多个二次贝塞尔和一条直线做一个path

葡京在线开户 18

始发的时候,两条贝塞尔曲线的冲天是0,控制点在path所在矩形的边沿,然后对而塞尔曲线下边的点和控制点做动画,分别提升和内运动,最后形成上图左边的图纸,然后把那个动画和item按钮向外部移动的卡通组成起来,就伪装成了水球分离的效果.

葡京在线开户 19

 上图青色矩形就是接二连三部分的path.动画的长河就是Item按钮的直径和大圆相交的时候着手和item按钮一起做动画,最后移动到Item按钮直径所在的岗位,整个距离就是Item的半径+item到主体的偏离+红色的d,而棕色的d可以通过公式求出

开班的时候也是让连接部分path在圆心的地点.定位方法和永恒Item按钮的措施是一心平等的.这里就不在重复了.只说一下c边的偏离是:大圆和小圆圆心的偏离-连接path低度的一半

 

源码下载:WaterDropsButtonGroup.zip 

 

参考连接:

  1. https://en.wikipedia.org/wiki/B%C3%A9zier_curve
  2. https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin
  3. https://www.cnblogs.com/ArthurQQ/articles/1730214.html
  4. http://blog.csdn.net/chouglas/article/details/50967566

– 服务端自动保存

葡京在线开户 20

甭管系统崩溃仍然停电都会招致麻烦的做事白白浪费,但利用在线报表设计器,所有的行事都保留在劳务器端,重新打开浏览器,登陆葡萄成报表系统,即可苏醒以前的劳作。

并且,这一特点还担保了用户无论在办公如故在出差的路上,都能持续自己的宏图工作,而这一切都是服务端自动保存,无需用户操作。

稍稍报表设计工作急需两人协调,在线设计的特色将这样的情景改成现实,在线设计允许五个用户同时编制同一张报表。

– 免安装

葡京在线开户 21

价值观的桌面设计器在利用前,都要考虑设置环境的问题,比如操作系统、.NET
版本、Linux
中的文件权限、MAC中的系统版本等,这就是价值观设计器往往会针对每种环境推出相应的设计器版本的缘故。

致使设计器用户在在真正最先报表设计工作往日,往往在装置环节就需要耗费大量的年华和生命力。

而在线设计器仅需用户通过浏览器即可使用,无需任何的装置或配备步骤,也无需考虑系统中是不是留存依靠的插件,打开电脑,即可使用,让用户把精力和岁月投入确实有价值的报表工作!

对报表用户的市值