GDI+入门(十、GDI+实例——淡入淡出)

十、GDI+实例——淡入淡出

private void button1_Click(object sender, EventArgs e)

        {

            Graphics g = this.CreateGraphics();

            g.Clear(Color.Blue);

            Bitmap bitmap = new Bitmap(Application.StartupPath+"//1.jpg");

            int iWidth = bitmap.Width;

            int iHeight = bitmap.Height;

            float[][] tem ={

                          new float[]{0.0f,0.0f,0.0f,0.0f,0.0f},

                          new float[]{0.0f,0.0f,0.0f,0.0f,0.0f},

                          new float[]{0.0f,0.0f,0.0f,0.0f,0.0f},

                          new float[]{0.0f,0.0f,0.0f,1.0f,0.0f},

                          new float[]{0.0f,0.0f,0.0f,0.0f,1.0f}

                          };

            ColorMatrix colorMatrix = new ColorMatrix(tem);

            ImageAttributes imageAtt = new ImageAttributes();

 

            for (float i = 0.0f; i <= 1.0f; i += 0.02f)

            {

                colorMatrix.Matrix00=i;

                colorMatrix.Matrix11 = i;

                colorMatrix.Matrix22 = i;

                colorMatrix.Matrix33 = i;

 

                imageAtt.SetColorMatrix(colorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Default);

 

                g.DrawImage(bitmap, new Rectangle(0, 0, iWidth, iHeight), 0, 0, iWidth, iHeight, GraphicsUnit.Pixel, imageAtt);

 

 

            }

 

            for (float i = 1.0f; i >= 0.0f; i -= 0.02f)

            {

                colorMatrix.Matrix00 = i;

                colorMatrix.Matrix11 = i;

                colorMatrix.Matrix22 = i;

                colorMatrix.Matrix33 = i;

 

                imageAtt.SetColorMatrix(colorMatrix, ColorMatrixFlag.Default, ColorAdjustType.Default);

 

                g.DrawImage(bitmap, new Rectangle(0, 0, iWidth, iHeight), 0, 0, iWidth, iHeight, GraphicsUnit.Pixel, imageAtt);

            }

        }

本例子中我们主要使用了一个5×5的颜色矩阵来调节图像的透明图来做的

可通过用 4×4 矩阵乘以这些颜色矢量将线性变换(旋转和缩放等)应用到颜色矢量中。但是,您不能使用 4×4 矩阵进行平移(非线性)。如果在每个颜色矢量中再添加一个虚拟的第 5 坐标(例如,数字 1),则可使用 5×5 矩阵应用任何组合形式的线性变换和平移。由线性变换组成的后跟平移的变换称为仿射变换。

下面复制一下MSDN的例子

例如,假设您希望从颜色 (0.2, 0.0, 0.4, 1.0) 开始并应用下面的变换:

1.     将红色分量乘以 2

2.     0.2 添加到红色、绿色和蓝色分量中。

下面的矩阵乘法将按照列出的顺序进行这对变换。

 

颜色矩阵的元素按照先行后列(从 0 开始)的顺序进行索引。例如,矩阵 M 的第五行第三列由 M[4][2] 表示。

5×5 单位矩阵(在下面的插图中显示)在对角线上为 1,在其他任何地方为 0。如果用单位矩阵乘以颜色矢量,则颜色矢量不会发生改变。形成颜色变换矩阵的一种简便方法是从单位矩阵开始,然后进行较小的改动以产生所需的变换。

 

具体的大家慢慢研究这个图像变换

这个图像没法截,就不截了,自己代码拷下来跑一跑就清楚了

本人也在学习GDI+,写得比较简单,让高手见笑了。欢迎高手给我指点

邮箱:bobui@163.com

QQ125941562

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个使用 Vue3 实现淡出淡入轮播图的完整实例: ```vue <template> <div class="carousel-container"> <div class="carousel-slide"> <transition-group name="fade" mode="out-in"> <div :key="currentSlide" class="carousel-slide-item"> <img :src="slides[currentSlide]" class="carousel-slide-img"> </div> </transition-group> </div> <div class="carousel-dots"> <span v-for="(slide, index) in slides" :key="index" class="carousel-dot" :class="{ active: currentSlide === index }" @click="jumpToSlide(index)"></span> </div> </div> </template> <script> import { ref } from 'vue'; export default { name: 'Carousel', props: { slides: { type: Array, required: true } }, setup(props) { const currentSlide = ref(0); const jumpToSlide = index => { currentSlide.value = index; }; const nextSlide = () => { currentSlide.value = (currentSlide.value + 1) % props.slides.length; }; setInterval(nextSlide, 5000); return { currentSlide, jumpToSlide }; } }; </script> <style> .carousel-container { position: relative; overflow: hidden; } .carousel-slide { position: relative; height: 500px; } .carousel-slide-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .carousel-slide-img { width: 100%; height: 100%; object-fit: cover; } .carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; } .carousel-dot { width: 10px; height: 10px; margin: 0 10px; border-radius: 50%; background-color: #fff; cursor: pointer; transition: transform 0.3s ease; } .carousel-dot.active { transform: scale(1.5); } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 该组件使用了 `ref` 来创建响应式数据 `currentSlide`,并且在 `setup` 函数中使用了计时器来每隔5秒钟自动切换轮播图。该组件还包括了一个 `jumpToSlide` 方法,用于实现点击小圆点跳转到指定的轮播图。在模板中,使用了 Vue3 的 `<transition-group>` 组件来实现淡入淡出效果。同时,还使用了 CSS3 的 `transform` 和 `transition` 属性来实现小圆点的缩放效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值