SVG_35_高仿B站弹幕

最新推荐文章于 2024-06-08 06:33:29 发布
原创 最新推荐文章于 2024-06-08 06:33:29 发布 · 345 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#SVG #Xi说SVG #Xi说孔方兄 #弹幕 #高仿B站弹幕

本文介绍了一种仿制B站弹幕效果的方法，通过控制文字位移实现动态显示，适合横屏观看，详细步骤及SVG_34_symbol标签使用技巧在文中分享。

说明：文章---SVG_34_symbol标签_图形模板，可在公众号查看。

 

今天仿制B站的弹幕进行的制作

 

请横屏观看

实现原理：

      通过控制文字的位移，是不是很简单。

 

本文写于2020年5月29日23:38:05

Xi说孔方兄认证

SVG_12_动画专题之标签：animateMotion
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-07 3768
写在前面： 动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇为第三篇文章，其他还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。 另外两篇： SVG_10_动画专题之标签：animate 我的理解：animate是控制控件自身属性的。 SVG_11_动画专题之标签：animateTransform 我的理解：a...
SVG_10_动画专题之标签：animate
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-05 2286
写在前面： 动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇文章开始，接下来还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。 动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。 比如，有一个需求，是把一个球移动到另一端，移动方式可随意指定，用<a...
微信-弹幕是怎么搞出来的，看svg！
年糕大大侠的小小博客
02-28 4189
最近经常看到微信推送的文章最后会来个弹幕，最为技术爱好者，看着评论里面各种评价，弹幕效果好厉害，求技术男神联系方式啥的。。。本来呢，我是个很淡泊而有单薄的人是吧，我绝对没有羡慕嫉妒恨啊！（即使是妹子们的评价我也没有羡慕嫉妒恨啊！） 下面是正文： 1.我的第一反应这不就是marquee么，不是都被淘汰了么。。。。 “` 123123 （大家自己找个微信在线编辑器，点击h
如何在网页中获取svg格式图片
2301_79124729的博客
09-04 5511
1.打开网页，这里以bilibili网页首页为例 2.右键检查，打开网页源码 3.点击左上剪头，可直接选中网页元素 4.选中一个svg的图标，右键编辑为HTML，把svg元素从头到尾全部复制 5.新建一个svg后缀的文件，粘贴，图标就有了
仿B站官方认证图标修改认证图标SVG代码
06-08 536
用途可以给自己博客或论坛，等网站里面认证使用。
ICO 网页图标素材打包 已分类 有预览图 多种格式
04-22
已经按照用途分类的，4中格式AI/PNG/SVG/EPS, 有预览图方便查找，可用作网页设计，思维导图等。
SVG文字缩放（文字多的时候不兼容火狐和IE）
诸葛苍穹
12-02 2714
<svg viewBox="0 0 900 900"> <g font-family="sans-serif" fill="blue" font-size="8"> <!-- 重叠效果 --> <text x="0" y="40" textLength="100"> hello world </text> <!-
Android 开源项目和文章集合（更新：2022.03.21）
热门推荐
z979451341的博客
11-08 20万+
1.再见SharedPreferences，你好MMKV！ https://mp.weixin.qq.com/s/VBMDIE0QHXQAMuIjon-Fjg
面试｜2021 菜鸟金三银四铜五 Android 被锤历程出炉...
静心 Study
06-20 5296
文章备份… 3,2,1,走你~ 终于做了这个决定 别人怎么说我不理 只要你也一样的肯定 我愿意天涯海角都随你去 我知道一切不容易 我的心一直温习说服自己 最怕你忽然说要放弃 跳槽真的需要勇气 来面对流言蜚语 只要你一个 Offer 肯定 我的跳槽就有意义 我们都需要勇气 去相信会在一起 人潮拥挤我能感觉你 放在我手心里你的 Offer 随着五音不全的歌喉，2021 年面（被）试（锤）正式开始… 个人简介 5 年工作经验，后将近三年技术栈野蛮生长（Flutter、微信小程序、PHP、H5、后台 Api、
APF_SVG.rar_APF SVG_APF和SVG_SVG控制_svg_控制SVG
07-14
实现SVG和APF的总能电能治理，适合初学者使用，使用dq电流控制
SVG.rar_c#svg_svg_svg contextMenu_svg csharp_svgpan.js
09-24
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许开发者创建可缩放、高质量且交互式的图形。在本示例中，"SVG.rar" 是一个压缩包，其中包含了一些与SVG开发相关的资源，特别是针对C#环境下的SVG...
svg.zip_qt svg_svg_svg qt_矢量图
09-24
在本案例中，"svg.zip_qt svg_svg_svg qt_矢量图"的标题暗示了这个压缩包包含的是与SVG矢量图和QT编程相关的资源。 QT是一个跨平台的C++应用程序开发框架，特别适用于图形用户界面和嵌入式设备开发。它支持多种图像...
svg_see_x64.exe
07-10
svg格式图像在资源管理器的预览软件,安装之后可在资源管理器显示预览,https://github.com/tibold/svg-explorer-extension/releases/tag/v1.1.0
SVG_PID.rar_svg_svg 仿真_svpwm_控制_无功仿真
07-15
静止无功发生器（SVG）是一种用于电力系统的设备，主要功能是动态调节电网的无功功率，以维持电压稳定和提高电能质量。SVG基于电压源逆变器（VSI）技术，能够快速响应电网变化，提供灵活的无功补偿。在本项目中，...
SVG创建多行文本
诸葛苍穹
12-02 2154
var width = 200; function init(evt) { if ( window.svgDocument == null ) { svgDocument = evt.target.ownerDocument; } create_multiline("Whatever text you want h
什么是SVG？及SVG引入方式
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
04-27 2866
如题，什么是SVG呢？ 百度百科答：SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以...
SVG_19_太阳_地球_月亮_三球仪_自转_公转
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-16 2312
公众号原文：公众号_Xi说SVG_SVG_19_太阳_地球_月亮_三球仪 本次实现的三球仪，太阳、地球、月亮都是有自转效果的，地球和月亮也都有自己的公转。 我定义了渐变色来显示出三颗球体的自转，但由于在文章中展示不出效果，所以改为了纯色，视频中是渐变色的效果，可查看。 简单来个知识普及： 太阳（太阳系的中心天体） 太阳是太阳系的中心天体，占有太阳系总体质量的99.86%。太阳系中的八大行星、小行星、流星、彗星、外海王星天体以及星际尘埃等，都围绕着太阳公转，而太阳则围绕着银河系的中...
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可.
按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、付费专栏及课程。

余额充值