Canvas 手写输入法

xuebihua-cn

在整合完“写笔画”网站后,考虑到大屏上输入文字不太方便,搜索一圈发现以下代码:web版手写输入法 ,利用了 QQ输入法的手写 handwritingapi.js 接口,不过文中添加的仅是鼠标事件,移动端的触摸事件不支持。

折腾到凌晨实在搞不定,求助了 @牧风 后依然卡壳,之后发现QQ输入法的鼠标定位值和 Canvas 直接触摸定位值不同,依样画葫芦造函数,神奇般的成了!

源码粗糙,可用就好: https://xuebihua.cn/qqshuru.js

“学笔画”折腾小记

点击体验→ https://xuebihua.cn

xuebihua_qr

刷着阮一峰的 weekly 看到了 Hanzi Writer 1 这个项目,发现笔顺的动画比较自然,还能在 svg 上手写练习,最重要的是看看 demo 好像上手比较简单,实际也如此。

功能代码非常好使,基本折腾在界面和陌生的代码上,比如想让 svg 自适应,搜索测试一晚发现还是以下代码好使:

Valine 评论框美化及功能优化

以下修改不涉及 Valine 源码的改动,防止后续官方更新还得再来一边。因此,相关 css、js 代码得放在调取 valine.min.js 之后。

评论框美化:

评论框美化:

.v .vwrap{padding: 0 0 44px;}.v .veditor{min-height:7rem;resize:none;}.v .vwrap .vedit{padding-top:0}.v .vwrap .vheader{width: 80%;bottom:0;position: absolute;background: #f7f7f7;}.v .vinput{padding:10px 15px;}.v .vwrap .vheader .vinput{border-bottom:0px}.v .vwrap .vedit .vctrl{margin-top:-44px;right:0;position:absolute;margin-right:-3px;}.v .vwrap .vcontrol{    position:absolute;right:0;bottom:0;width:20%;padding-top:0px;}.v .vwrap .vcontrol .col.col-80{width: 100%;}.v .vbtn.vsubmit{border-radius: 0;padding: 0;color: #fff;line-height: 44px;width:100%;border: none;background:#1abc9c;}.v .vwrap .vedit .vctrl span.vpreview-btn,.v .vwrap .vcontrol .col.col-20,.v .vlist .vcard .vhead .vsys{display:none;}
@media screen and (max-width: 520px){
    .v .vwrap .vheader .vinput{width: 33.33%;padding:10px 5px;}
}

基于 LeanCloud 的评论系统:Valine

Valine 官网: https://valine.js.org/
Valine Admin 云引擎: https://deserts.io/valine-admin-document/

安装过程略过不表,目前还存在一个问题,通过使用:

//unpkg.com/valine@1.3.6/dist/Valine.min.js

指定 1.3.6 版本解决,官方最新的 1.3.9 报错,官网自用的 1.3.10 没问题,但还没更新至 CDN。另外这个 Valine Admin 云引擎方便,顾名思义,安装完毕后可通过 LeanCloud 的二级域名管理评论,相当于给 Valine 增加了个评论管理后台。

另外,昨天绑定域名方式由原来的 CNAME 换成官方推荐的 DNS 模式,这才感受到后台是勾选了 HK 节点!之前卡到自己都不想打开自己的博客!

一周前看到 App Store 里推荐了 《Sky 光·遇》 是《风之旅人》的陈星汉团队开发。坚持了3天“摸黑探索”后还是找了攻略,大概理清游戏套路。吃“光之子”小人升级翅膀,目前共计能吃到55颗刚好升到7星,一口气能煽7下不带喘,飞得高看的远。另外就是点“蜡烛”,蜡烛满了可换头换脸换时装凹动作,到处打卡截图嗮。