WPF水珠效果按钮组

针对表用户的价

贝塞尔曲线

优先来拘禁少组图,有助于了解啊是贝塞尔曲线(图片取自维基百科,参考链接1)

其次潮贝塞尔曲线:

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

老三不善贝塞尔曲线:

 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之随机取值

– 报表开发人员

于线设计器的产让报表的开发设计也入的协同工作的一世,相对于事先报表的效益、设计、美化工作只能按序完成,而且装有人数之设计器版本还待统一,避免出现不平等的情形。

假如在线设计的表征使得这些干活儿之互动成为可能,确定需要后,建立报表的中心框架,然后至由图画人员就UI设计,而开发人员可以小心于数据准备同组织,

最终用功能以及数统一,进行最终的通告。并且,所有这些工作无论需大家汇总,随时随地都可做到,真正的增强了工作效率。

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

 

连带阅读:

在线报表设计实战系列

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

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

制作复杂表头报表

 

效果图

 

跟习俗桌面设计器主要分

有关知识

立刻有的骨干就是是废话,网上都能够找到,我只不过是收拾了盖下.建议先不扣,用到之早晚可回到看

– 跨平台

直面不同之装备,如桌面电脑、平板电脑以及手执设备,传统设计器需要给不同装备终端发布不同的本,但在线设计器而以先天性的多平台支持,无需过多考虑平台特色,利用目前最盛的HTML5术,在不同的平台及

呢用户提供几乎等同的统筹经验,而相对传统设计器,更非设有为效应升级而带来的版本混乱问题。

重点的大圆

– 服务端自动保存

随便系统崩溃还是停电还见面招麻烦之做事白白浪费,但使用在线报表设计器,所有的办事还保存于服务器端,重新打开浏览器,登陆葡萄成表系统,即可恢复之前的做事。

还要,这无异风味还包了用户无论以办公室还是当出差的旅途,都能连续协调的计划性工作,而立一切都是服务端自动保存,无需用户操作。

小报表设计工作索要多人协调,在线设计之性状将这么的现象改成具体,在线设计允许多独用户同时编制同一摆表。

Path画法

主导的大圆是只ToggleButton,替换模版,背景换成贝塞尔曲线组成的圆.

每个贝塞尔曲线的起点与极端就背着了,非常简单,这里要说说控制点.

算算产生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,见代码

 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

– 免安装

风土的桌面设计器在利用前,都设考虑安装环境之问题,比如操作系统、.NET
版本、Linux
中之文书权限、MAC中的体系版本等,这便是风设计器往往会指向每种环境出相应的设计器版本的缘由。

招设计器用户在当真正开始报表设计工作之前,往往以安环节就是待吃大量底时间和生机。

若是在线设计器仅得用户通过浏览器即可使,无需外的设置或安排步骤,也管需考虑系统受到是否存在因的插件,打开电脑,即可使,让用户把精力以及时空投入确实发生价的表工作!

水球连接的有些

连续的有是为此简单个次浅贝塞尔同同一条直线做一个path

初步的时刻,两漫长贝塞尔曲线的莫大是0,控制点在path所在矩形的边际,然后针对要塞尔曲线上面的触发以及控制点做动画,分别提高与外走,最终形成上图右边的图样,然后将这动画以及item按钮向外部移动的卡通片组成起来,就作成了水球分离之效果.

 上图红色矩形就是连续有的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

倘在线报表设计器则是靠无需安装,通过各设备的浏览器就是能够在线下的表格设计器,完全铲除了桌面设备、移动装备相当不同平台的限制。

任何文化

并未点了贝塞尔曲线的语句,可能得费来时间整理下,其他的学问就比较简单了

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

三角形函数:

sinA=a/c

cosA=b/c

勾股定理:

c^2=a^2+b^2

– 自动更新

风土人情的设计器在厂商发布了初效能后,往往得再行下载和安装配备,但在线设计器的机能升级了在服务端完成,客户无需繁琐的手续即可体验新增功能。

按钮的职位

无论是奇数只,还是偶数个,我们还惦记被她为Y轴对如

首先将圆分成8等客,每一样份还是45度,也就是绝多只能放下8只item,

 

打上图可以拘留出来,其实就是奇数独在线上,偶数单以个别丝期间

有个简单的主意,就是预先在终点依次顺时针排列,每个item间隔45度,然后再次逆时针转动,每多一个item就基本上反45/2度(两长分割线是45度,中间为尽管是45/2度),如下图:

 上图是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);

本文通过对照两栽设计器主要特色和运用状况,旨在认证在线报表设计器对报表用户的价值所在。

概括介绍

是功效难点就是有数片:一凡是水球分离与融合上的接连,二凡重点圆的振荡

然而事实上网上还来解决方案了

第一有的是以少单全面之间加个用贝塞尔曲线组成的path,用同的颜色,其实是障眼法.见参考链接4

亚片凡用4段子三浅贝塞尔曲线组成的path代替Ellipse,因为Ellipse是振动不起的,这样就可决定贝塞尔曲线的触发来被圆抖动.见参考链接3

 

item

– 所见就所得

俗的报表设计器在成就计划后,需要持续的开展发布,在最终用户的浏览环境遭到翻设计功能,效率特别放下。而在线报表设计器在规划时即可预览最终效果,随时修改设计,设计效率大大提高。

 

振动动画

由于到是受12只点控制的,让圆抖动,也不怕是指向12只点开点动画

可据此要帧动画,这样控制的比较细,要顾的凡,衔接的地方如果一律滑.我这边开的于简陋,就寻找了一个变后的图样,重复了5次.如果你发趣味,可以多开来,做的尤其多,动画看起表现力越强

这边自己连不曾失去研究什么算法,就是简的在blend里,找了部分接触

见代码:

 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

– 最终用户

在线报表设计器以类OFFICE的界面风格及操作习惯,并巧妙地经过分类、向导、智能提醒等办法以原先只有规范人员才掌握的复杂报表设计编程人人可用之简易工具,从而使得实时响应工作要求的改成为可能。

– 系统集成商

对于网集成商来说,效率及实行周期的是一个品类成败的首要,而在线报表设计器的无数特色都能够极大的增长型成功的也许。

无论售前形成需求原型,亦可能发布后修改新增的急需,集成商都只是经在线设计器快速验证用户需,并特邀用户通过浏览器就经常的认可,以飞快专业的响应措施赢得最终用户认可,同时为极大的退售前和售后资金,提高盈利!

人情桌面报表设计器是凭需在网中装置,并透过桌面快捷方式打开的设计器。根据不同之体系,需要安装相应的设计器软件,同时以谁设备及设置,就不得不于哪个设备上动。