SVG_27_指尖魔法_等你施法_斗罗大陆史莱克七怪_闪亮登场

斗罗大陆粉丝创作暗黑风格GIF动画
最新推荐文章于 2021-01-13 08:40:39 发布
原创 最新推荐文章于 2021-01-13 08:40:39 发布 · 524 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#SVG #Xi说SVG #Xi说孔方兄 #透明度

斗罗大陆粉丝使用PS调整图片曲线，将史莱克七怪形象暗黑化，并通过animate控制透明度实现GIF动画效果。公众号提供详细教程。

作为斗罗大陆粉丝，在使用图片时，自然考虑到史莱克七怪。

图片暗黑化是使用PS简单调整了下曲线，比较丑，见笑。

好了，废话不多说，看效果。

 

Q：暗黑的是不是不好看？ 

A：你指尖有魔法，点击一下变好看吧。

 

不管认不认得他们，释放一点指尖魔法看看。

 

实现原理其实很简单：就是利用animate控制透明度opacity。

 

开灯后，有没有刺眼的感觉，让我们一起施法开灯。

 

统一制作成了GIF动画，以方便查看效果，想看真实效果，可以去公众号搜索相关文章。

Xi说孔方兄认证

 

解决CMakeList find_package找不到Qt5，找不到ECM
有问题或资源连接有缺失的可以私信公众号新潮看世界获取
07-05 4100
在编译一个cmake项目的时候，需要用到ECM，于是使用vcpkg install ecm，结果安装成功，但是cmake依然不识别，find_package报错，找不到ecm位置，很显然，vcpkg安装ecm到packages路径下的时候，这个packages路径并没有被cmake查找到这时候，我们需要在CMakeList文件中添加路径说明，也就是用到set了。如下图所示，Qt5可以直接set，但是ECM，我却找不到ECM的路径怎么设置，Qt5_DIR我们经常看到,但是ECM_DIR却不曾看到过，很明显，试
SVG_12_动画专题之标签：animateMotion
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-07 3767
写在前面： 动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇为第三篇文章，其他还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。 另外两篇： SVG_10_动画专题之标签：animate 我的理解：animate是控制控件自身属性的。 SVG_11_动画专题之标签：animateTransform 我的理解：a...
双继承_斗罗大陆：修罗神和海神都想让唐三继承神位，两神因此还大吵一架
weixin_30350163的博客
01-09 1008
大家好，我是小飞，要说国漫中的开挂王，斗罗大陆的唐三绝对算得上一个，靠着一身的主角光环，一来到斗罗大陆唐三就拥有前世的全部记忆，靠着前世学来的唐门暗器和内门绝学《玄天宝录》让他在斗罗大陆这片新的土地上多次化险为夷，关键他还很会投胎，不但先天满魂力，还继承了父母的双生武魂，从此开启了在斗罗大陆的开挂之旅。先是在寻找魂环中“意外"地获得了十分珍惜的外附魂骨，后来又在冰火两仪眼中获得了诸多的仙草，让他几...
SVG_13_14_15_套图展示_你看我漂亮吗_斗罗大陆史莱克七怪
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-09 1775
SVG_13、14、15在公众号：Xi说SVG里面是发了三篇文章的，在优快云里面，由于无法展示效果，所以集合在一篇文章里面了。 实现原理：svg定制了click事件，当点击时，控制图片的隐藏显示达到效果。大家可以灵活应用。 上效果图 你看我漂亮吗？！ 点击后，出现眼部放大，眼睛中出现的两个字，有必杀效果。可以到公众号查看文章，然后转到自己朋友圈，或者发送给欠你钱的人，问问他们，图中的美女是不是很漂亮？！ 哈哈。。。 SVG SVG 斗罗大陆-史莱克七怪 作为斗罗...
【ubuntu16.04】freetype安装配置与使用/搭配font_to_svg开源库
github_35807147的博客
04-02 4303
首先声明版本，博主使用的ubuntu16.04系统，不同版本可能导致未知的错误。 1.问题描述： 需要从ttf字体格式中提取关键点并且记录保存，用于以后的深度学习训练。 github有donbright已完成的开源库font_to_svg可以实现从ttf字体中提取关键点，并且根据svg（可伸缩矢量）的方式进行保存。 github链接如下：https://github.com/donbrig...
scipy.optimize.curve_fit-曲线拟合
数据客
10-09 1万+
Scipy是一个用于数学、科学、工程领域的常用软件包，可以处理插值、积分、优化、图像处理、常微分方程数值解的求解、信号处理等问题。它用于有效计算Numpy矩阵，使Numpy和Scipy协同工作，高效解决问题。
怎么插入svg_公众号文章SVG使用教程分享
weixin_32742203的博客
01-13 4389
嘿，胖友们大家好呀，我是三儿。每天，困扰在我们新时代新媒体人面前的，不是今天不知道该写啥，也不是粉丝咋又掉了，而是：今天中午吃啥？每天一到饭点，公司的外卖群里就开始了灵魂质问：今天吃啥？这个时候，就轮到貌美如花的小三儿出场了，先来看看三儿是如何解决的吧！知乎视频​www.zhihu.com（PS：由于本文转载自135编辑器公众号文章，上面的视频本应是动态展示，由于知乎平台暂时不适应，所以就以录制的...
matlab图片导出无失真库export_fig介绍（半透明效果）
热门推荐
hyhhyh21的博客
01-28 2万+
matlab图片导出无失真库export_fig介绍
Flutter-选择附件，图片，视频。file_picker
IT技术专栏
07-31 1万+
仅供参考： 引入插件： file_picker: ^1.3.8 按照返回值，分了三组： // Single file path String filePath;第一组：返回文件地址 //选择任何文件 filePath = await FilePicker.getFilePath(type: FileType.ANY); // will let you pick one file pat......
svg_see_x64.exe
07-10
svg格式图像在资源管理器的预览软件,安装之后可在资源管理器显示预览,https://github.com/tibold/svg-explorer-extension/releases/tag/v1.1.0
SVG_29_径向渐变radialGradient
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-24 1388
知识点： radialGradient 用来定义径向渐变，以对图形元素进行填充或描边。 说人话，就是定义辐射性渐变，就是以一个点为圆心，向周围进行颜色渐变。前面有文章讲解了线性渐变，有兴趣的可以点击查看：lineGradient线性渐变-- SVG_9_线性颜色渐变_竖排文字_动画 使用radialGradient的方式与使用lineGradient的方式一样，都是在defs标签中定义的，然后通过url(#id)的方式进行引用。不仅可以用在fill填充，还可以应用在stroke描边上。这里其实和另一个
SVG_24_pattern标签_使fill填充_stroke描边多姿多彩
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-18 1410
知识点 pattern标签 定义：使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。 重点： 使用pattern，可以指定各种各样的样式，然后把样式应用到fill填充或者stroke描边中，使控件多彩炫目 pattern定义好的一个样式，在应用到其他控件中时，会自动平
python读取svg_使用Python / PIL读取SVG文件
weixin_39994627的博客
12-05 2223
我是Python的新手,所以请耐心等待我.基本上我的脚本应该像这样运行：1)加载图像并将其分成R,G,B通道2)使用保存为svg文件的现有路径标记该图像的区域3)用该区域的R,G,B值进行一些计算.(进一步将图像发送到文件夹A或B,具体取决于计算结果)我已经完成了1)和部分3)但我目前的问题是加载svg文件并将其应用于我的图像.图像是用鱼眼镜头拍摄的照片.我只想获得实际照片的RGB值 – 而不是黑...
SVG_38_path标签之字母Q_二次贝塞尔曲线
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
06-06 1582
昨天的文章中用到了三次贝塞尔曲线--SVG_37_六一儿童节快乐-路径移动-火焰文字，那么接下来几篇文章围绕着贝塞尔曲线说明一下。 相对于circle、rect、ellipse、polygon等固定的图形，在绘制曲线时，line是一条直线，polyline是折线，而path标签代表了圆滑。 path标签可以很灵活的绘制各种图形，上面提到的各种标签，都可以使用path标签绘制出来。 前面有文章对path进行了说明，如 SVG_5_矢量图_Path标签_弧线世界开启 SVG_18_a标签_clipPa
什么是SVG？及SVG引入方式
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
04-27 2862
如题，什么是SVG呢？ 百度百科答：SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以...
SVG_19_太阳_地球_月亮_三球仪_自转_公转
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-16 2311
公众号原文：公众号_Xi说SVG_SVG_19_太阳_地球_月亮_三球仪 本次实现的三球仪，太阳、地球、月亮都是有自转效果的，地球和月亮也都有自己的公转。 我定义了渐变色来显示出三颗球体的自转，但由于在文章中展示不出效果，所以改为了纯色，视频中是渐变色的效果，可查看。 简单来个知识普及： 太阳（太阳系的中心天体） 太阳是太阳系的中心天体，占有太阳系总体质量的99.86%。太阳系中的八大行星、小行星、流星、彗星、外海王星天体以及星际尘埃等，都围绕着太阳公转，而太阳则围绕着银河系的中...
SVG_10_动画专题之标签：animate
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-05 2286
写在前面： 动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇文章开始，接下来还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。 动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。 比如，有一个需求，是把一个球移动到另一端，移动方式可随意指定，用<a...
SVG_22_marker标签定义标识_如箭头
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-18 2118
知识点： marker标签中，有以下几个主要属性 refx属性为x轴的偏移量，即箭头与线的偏移，0表示接触； 当refx为0时： 当refx为12时： 一对比，效果立马明白了吧。 refy属性为Y轴的偏移量，一般设置为图形的一半，这样指示出来的比较顺眼； 当refy为marker控件Y轴一半时： 当refy为0时： markerWidth、markerHeight目前来看控制marker的大小； markerWidth和markerHeight可.
SVG_16_defs标签_use标签_style标签_红绿灯效果
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-16 1702
知识点： defs标签 SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用<use>元素呈现这些元素。 use标签 通过defs定义好被引用的标签或标签组后，再使用use标签进行引用。 use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM...
按lv_svg_render_get_viewport_size 大小显示
最新发布
07-25
在使用 LVGL 库处理 SVG 图像时，若需要调整 SVG 的视口（viewport）大小以适应显示区域，可以利用 `lv_svg_render_get_viewport_size` 函数来获取 SVG 的推荐视口尺寸，并根据实际显示需求进行调整。 该函数原型如下： ```c lv_result_t lv_svg_render_get_viewport_size(lv_svg_handle_t * handle, lv_coord_t * w, lv_coord_t * h); ``` 此函数会返回 SVG 文件中建议的视口宽度和高度，通常基于 SVG 的 viewBox 属性。开发者可以使用这些值作为参考，来设置 SVG 图像在 LVGL 界面中实际显示的尺寸。例如： ```c lv_coord_t svg_w = 0; lv_coord_t svg_h = 0; lv_svg_render_get_viewport_size(svg_handle, &svg_w, &svg_h); ``` 在获取到 SVG 的原始视口尺寸后，可以根据目标显示区域的大小进行缩放。例如，若希望 SVG 图像自适应一个固定大小的容器（如 200x200 像素），可以将 `svg_w` 和 `svg_h` 设置为该固定值，以实现视口适配： ```c svg_w = 200; svg_h = 200; lv_svg_render_set_viewport_size(svg_handle, svg_w, svg_h); ``` 此外，若需要保持 SVG 图像的宽高比并填充整个显示区域，可以使用 `lv_svg_render_set_align` 函数配合 `LV_SVG_ALIGN_CENTER` 等对齐方式，使 SVG 图像在指定区域内居中显示并自动缩放[^1]。 ### 注意事项 - 在调用 `lv_svg_render_set_viewport_size` 前，确保已正确初始化 SVG 渲染器并加载 SVG 数据。 - 如果 SVG 文件中未定义 viewBox，则默认视口尺寸可能为 0，此时需要手动指定视口大小。 - 为了确保 SVG 图像在不同分辨率或容器大小下良好显示，建议结合 `lv_svg_render_set_align` 和 `lv_svg_render_set_viewport_size` 进行动态适配。 ### 示例代码 ```c lv_svg_handle_t * svg_handle = lv_svg_create_from_file("path/to/image.svg"); lv_coord_t svg_w = 0; lv_coord_t svg_h = 0; lv_svg_render_get_viewport_size(svg_handle, &svg_w, &svg_h); // 假设目标显示区域为 200x200 svg_w = 200; svg_h = 200; lv_svg_render_set_viewport_size(svg_handle, svg_w, svg_h); lv_svg_render_set_align(svg_handle, LV_SVG_ALIGN_CENTER, LV_SVG_FILL_METHOD_ZOOM); // 将 SVG 图像添加到 LVGL 界面中 lv_obj_t * img = lv_img_create(lv_scr_act()); lv_img_set_src(img, svg_handle); ``` 通过上述方法，可以灵活地调整 SVG 视口大小，使其适应不同的显示区域，并保持良好的图像比例和清晰度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

King·Forward

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值