分类
前端

使用 SVG 制作扇形

有时候我们需要制作扇形,比如图形化数据生成饼图的时候。使用 HTML + CSS 做不到,必须借助 SVG 帮助。经过一些摸索,大概方式如下:

0. 创建 SVG

我们需要一个 SVG,然后在里面画一个园:

<svg xmlns="http://www.w3.org/2000/svg" height="600" width="600" viewBox="0 0 20 20">
  <circle r="5" cx="10" cy="10" />
</svg>

这里,我创建了一个 SVG,并且以 10,10 位圆心,画了一个半径为 5 的圆。SVG 的视窗只需要显示这个圆,所以是 0 0 20 20 的正方形。widthheight 用来定义网页中 SVG 的尺寸,SVG 是矢量图形,可以实现内容的无损缩放,所以即使显示尺寸比图形尺寸大很多,也不用担心出现锯齿。

1. 用边框画圆形

接下来,我们用给圆加边框的方式来做圆形。

<circle
  r="5"
  cx="10"
  cy="10"
  fill="transparent"
  stroke="tomato"
  stroke-linecap="butt"
  stroke-width="10"
></circle>

首先,我们用 fill="transparent" 清理掉圆形内部的颜色,然后用 stroke="tomato" 给边框加上橙色。接下来,我们通过 stroke-width="10" 设置边框宽度为 10,这也是矩形半径。

此时,屏幕上会出现一个橙色的正圆。

2. 画扇形

画扇形的方式有很多,比如画两条半径然后画弧形再填充颜色。但是利用边框画扇形最简单。

用边框画扇形说白了,其实是结合圆环和虚线,需要有扇形的地方,就填充颜色;不需要扇形的地方,就用虚线的空白。这里要用到 stroke-dasharray 属性,它的规则很简单,奇数为实偶数为虚,所以我们只要计算扇形所需的弧形长度,然后剩下的填充周长即可。

在我们这里,就是 stroke-dasharray=”calc(10 * 3.1415926 * 1/6) 31.415926",即取绘制一个 1/6 大小的扇形。

3. 修改位置

修改位置需要使用 stroke-dashoffset 属性,它会把图形从原来的位置移动若干距离,正的就往起点移动,负的就往终点移动。

在我们这里,就是 stroke-dashoffset="calc(-10 * 3.1415926 * 1/6)",将第二个扇形移到第一个扇形的旁边。

4. 其它+已知问题+扩展阅读

最终效果:https://codepen.io/meathill/pen/yLMQqBQ?editors=1000

这些属性,也可以使用 CSS 样式替换,效果一样。

Safari 问题比较多,首先半圆就不是半圆,其次偏移也不对,不知道是否只支持 CSS。

分类
工具

使用 jumpcutter 粗剪视频,移除静音片段

今年打算在直播和视频上做点努力,所以通过直播录了不少视频,周末想剪一剪,但是一方面我不擅长剪视频,另一方面也没有合适的工具,所以颇费了一些周折。

后来发现 jumpcutter,按照其作者的设计,它可以识别视频中的 👍 和 👎,只保留 👍 的片段,剪掉 👎 的片段;并且可以自动剪掉没有声音的部分,这样视频可以很快完成初剪。

前面的功能很炫酷,不过对于我来说不太实用,后面的功能比较有价值,于是我试用了一下,记录过程如下:

# clone 代码到本地
git clone git@github.com:carykh/jumpcutter.git

# 安装依赖,位于 requirements.txt
pip3 install Pillow audiotsm scipy numpy pytube

# 然后就可以使用了
python3.9 jumpcutter.py --input_file left.mp4 --output_file ./1.mp4 --silent_threshold 0.06 --silent_speed 99

其它参数如下:

--input_file目标视频
--urlYouTube 视频,国内用户用途不大
--output_file输出视频
--silent_threshold静音阈值,即多小的声音可以认为是有声音的(浮点数,0~1,默认 0.03)
--sounded_speed有声音的片段,以怎样的速率播放(浮点数,默认 1)
--silent_speed静音的片段,以怎样的速度播放(浮点数,默认5,即 5 倍速度)
--frame_margin在有声音的片段两边保留多少间隔(默认1)
--sample_rate声音取样率
--frame_rate帧数
--frame_quality质量
参数列表

比如前面我用的命令,就是认为小于 0.06 的声音为静音,静音播放速率 99(基本上直接跳过了)。

我处理了两段视频,感兴趣的同学可以试一试:

接下来我还想做两个功能,有了这两个功能视频处理后基本就能满足我的需求了:

  1. 找到“嗯”、“哦”、“那个”等无意义的语气助词,把它们干掉
  2. 识别“上一段不要”这样的语音命令,并且找到最合适的片段干掉
分类
生活

Google Photo 生成的父亲节视频

父亲节,Google Photo 根据上传的照片自动生成的视频,我选了姆伊姆二,结果只有姆二,看来 AI 认狗还是不太行。

分类
应用

应用创意:我也是大腿

直播界风起云涌,如今很多大主播的号召力已经不亚于三四线小明星,比如陈一发。相信很多人都知道,相信很多人也看过这个视频:主播真会玩鬼畜篇08:暴击女王陈一发。像我这样的中老年人其实对 B 站和鬼畜都不怎么感冒,不过对这种视频的传播效力很感兴趣。

今天百度发布了分词产品,虽然我很讨厌百度,但不得不说这个分词产品和它的语音合成产品都给我们这些不会语音合成的开发者创造了新的可能,算是百度积累的一件功德,略微降低了我对它的恶感。

接下来介绍的这个 idea 我其实琢磨一阵子了,它是一个工具,可以用来合成任意鬼畜视频。工作流程如下:

  1. 抓取直播视频,提取音频文件。现在大主播都有回看功能,应该不难。
  2. 把音频文件切割后,利用百度语音转换成文字。切割主要根据停顿,方便识别句子。
  3. 把时间点和文字入库备用。
  4. 选择一首歌,或者自己写个段子
  5. 使用 ES 之类的工具,检索出匹配度最高的句子;也可以使用百度分词工具,分词,查找最匹配的段落
    1. 合成结果类似:
      白日依山尽 ( 2018-01-01 1.mp4,10:10:10-10:10:25)
      黄河(2018-01-02 2.mp4, 10:10:12-10:10:15) 入海流(2018-01-02 3.avi,10:15:22-10:15:35)
      欲穷千里目(无匹配)
      更上一层楼(4.flv,0:0:15-0:0:35|5.mp4, 1:1:1-1:1:20)
    2. 纯文本文件,方便保存和版本管理
  6. 人工预览一遍,对个别词进行调整
  7. 自动裁剪拼接配乐输出视频
  8. 完成

这样一来,即使主播本人未播过的歌曲,也可以根据素材合成出来,比如 陈一发儿:~老公~要抱抱~要亲亲~嗯~人家要嘛~

目前这里面所有步骤都可以使用工具和比较简单的开发语言完成,如果你想积攒编程经验,又无从下手,且喜欢看各种女主播,这个 idea 就不妨拿去一试。

分类
技术 教程

《写 CSS 也要开脑洞:万能的 `:checked + label`》视频补缺

4月27日直播《写 CSS 也要开脑洞:万能的 :checked + label》时,OBS 推流连接断了一下,当时不知道情况,今天看了下发现录像中间少了6分钟多的内容,虽然不是最关键的部分,不过还是补一下吧。

错误截图

不过这段视频 5:50 的位置,介绍纯 CSS 组件的优势那里有问题。当时有点忘词,这里我想说的第一点是:

纯 CSS 组件顾名思义,只改变外观,不改变行为。所以它的功能不会因为浏览器变化而变化,即使浏览器支持不完善,即使因为加载速度或者网络关系,导致 CSS、JS 加载失败,它最多样式回归到原始样式,功能是完全一致的。在非标准浏览器环境下,如读屏器,也是如此。