C#实现一个贝赛尔艺术

看C# Windows程序设计的第十三章,作者Petzold实现了一个bezier art,然后我稍微改变了一下颜色变换,觉得非查的神奇,这里将代码贴出来,需要申明的是,这个程序代码绝大部分是原作者的:
  1. //BezierArt.cs
  2. //build BezierArt.cs PrintableForm.cs /main:BezierArt
  3. using System;
  4. using System.Drawing;
  5. using System.Windows.Forms;
  6. class BezierArt : PrintableForm
  7. {
  8.     const int iNum = 100;
  9.     float r = 1;
  10.     float g = 1;
  11.     float b = 1;
  12.     public new static void Main()
  13.     {
  14.         Application.Run(new BezierArt());
  15.     }
  16.     public BezierArt()
  17.     {
  18.         this.Text  = "Bezier Art";
  19.     }
  20.     protected override void DoPage(Graphics grfx, Color clr, int cx, int cy)
  21.     {
  22.         Pen      pen  = new Pen(clr);
  23.         PointF[] aptf = new PointF[4];
  24.         Random   rand = new Random();
  25.         for (int i=0; i<iNum; i++)
  26.         {
  27.             double dAngle = 2*i*Math.PI/iNum;
  28.             aptf[0].X =   cx/2+cx/ 2*(float)Math.Cos(dAngle);
  29.             aptf[0].Y = 5*cy/8+cy/16*(float)Math.Sin(dAngle);
  30.             
  31.             aptf[1]   = new PointF(cx/2,  -cy);
  32.             aptf[2]   = new PointF(cx/2, 2*cy);
  33.             
  34.             dAngle   += Math.PI;
  35.             
  36.             aptf[3].X = cx/2+cx/ 4*(float)Math.Cos(dAngle);
  37.             aptf[3].Y = cy/2+cy/16*(float)Math.Sin(dAngle);
  38.             //clr = Color.FromArgb(rand.Next(256), rand.Next(256), rand.Next(256));
  39.             //pen = new Pen(clr);
  40.             
  41.             g += 0.2f;
  42.             b += 0.3f;
  43.             r += 0.4f;
  44.             clr = Color.FromArgb(((int)r)%256, ((int)g)%256, ((int)b)%256);
  45.             pen = new Pen(clr);
  46.             grfx.DrawBeziers(pen, aptf);
  47.         }
  48.     }
  49. }
  50. /**
  51.  */

然后得到了一些好看的结果:


这里的图片不是一个程序生成的,而是对颜色变换作过修改之后得到的。




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现加入购物车飞入动画,可以使用塞尔曲线来控制动画路径。具体实现步骤如下: 1. 在购买按钮点击事件中,获取购买按钮的位置和购物车图标的位置,并计算出两者之间的距离。 2. 创建一个塞尔曲线,控制点设置为购买按钮位置和购物车图标位置的中心点,终点设置为购物车图标位置。 3. 使用CSS3动画或JavaScript来实现动画效果,让购买按钮沿着塞尔曲线飞入购物车。 下面是一个简单的实现示例: ```html <template> <div> <button @click="addToCart">加入购物车</button> <div class="cart-icon"></div> <div class="ball"></div> </div> </template> <script> export default { methods: { addToCart() { const button = document.querySelector('button') const cartIcon = document.querySelector('.cart-icon') const ball = document.querySelector('.ball') const buttonRect = button.getBoundingClientRect() const cartIconRect = cartIcon.getBoundingClientRect() const deltaX = cartIconRect.left - buttonRect.left const deltaY = cartIconRect.top - buttonRect.top const controlPointX = (buttonRect.left + cartIconRect.left) / 2 const controlPointY = buttonRect.top - 100 ball.style.left = buttonRect.left + 'px' ball.style.top = buttonRect.top + 'px' const bezierPath = `M${buttonRect.left},${buttonRect.top} Q${controlPointX},${controlPointY} ${cartIconRect.left},${cartIconRect.top}` ball.animate( [ { transform: `translate(0,0)` }, { transform: `translate(${deltaX}px, ${deltaY}px)` } ], { duration: 500, easing: 'ease-out', fill: 'forwards' } ) ball.animate( [ { transform: `translate(${deltaX}px, ${deltaY}px)` }, { transform: `translate(0,0)` } ], { duration: 500, easing: 'ease-in', fill: 'forwards', delay: 500 } ) ball.animate( [ { opacity: 1 }, { opacity: 0 } ], { duration: 500, fill: 'forwards', delay: 1000 } ) const path = document.createElementNS('http://www.w3.org/2000/svg', 'path') path.setAttribute('d', bezierPath) path.setAttribute('fill', 'none') path.setAttribute('stroke', 'red') path.setAttribute('stroke-width', '2') document.querySelector('.container').appendChild(path) } } } </script> <style> .cart-icon { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: url('cart.png'); background-size: cover; } .ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: red; } .container { position: relative; } </style> ``` 这里使用了CSS3动画和JavaScript动画结合的方式来实现购买按钮飞入购物车的效果。在addToCart方法中,首先获取购买按钮和购物车图标的位置,并计算出两者之间的距离。然后根据塞尔曲线的控制点计算出塞尔曲线路径,并创建一个SVG path元素来显示路径。最后使用CSS3动画和JavaScript动画来实现购买按钮沿着塞尔曲线飞入购物车的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值