Scratch3.0 二次开发——支持在积木选择区域显示超长积木块

1,143 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情

概述

Scratch3.0 二次开发系列,系列说明、Demo源码等请查看:《Scratch3.0 二次开发——开篇》

这次核心介绍如何修改 scratch-blocks 库 使其支持在积木选择区域(flyout)显示超长积木块

最终效果如图:

需求分析

当积木太长时,官方 Scratch 的做法是在积木选择区域(flyout)直接隐藏掉超出的部分,如下图:

只能将积木拖到编辑区域才能把所有内容完整显示出来,一定程度上这个交互不太友好。希望可以实现当鼠标在积木选择区域(flyout)悬浮时,就把积木超出的内容显示出来,否则就隐藏掉,这样交互相对来说更合理一点。

实现细节

scratch-blocks 项目的前置准备请参考这篇:Scratch3.0 二次开发——支持隐藏积木选择区域

思路

先明确官方 Scratch 到底是采用什么方法把太长的积木在 flyout 实现隐藏(正确来说应该是裁剪),一开始找的时候没有什么好的方法,只能打开 Chrome Devtools 定位到 flyout 的地方,一个个 html 元素、css 属性尝试删除修改,看效果。

最终找到了官方 Scratch 是通过 svg 的 clip-path 实现上述的裁剪行为,把超出 flyout 可显示区域的积木全部裁剪掉。

关于 svg 的 clip-path 的详细介绍和用法可以参考以下两篇文章内容:

定位到这一点后,后续修改就比较简单了 ( ̄▽ ̄)~*

源代码

文中没有贴完所有源码,有需要的朋友麻烦上 scratch-blocks github 库 自取,有很多关键性的注释也附在源码上面,记得看看中文类型的注释(英文的注释是官方的,中文的注释都是我自己加上去的)

下文只贴一些变量、函数名,作为源代码中的“目录”,起到总览的作用,后续看源码的时候不至于迷路 (づ ̄3 ̄)づ╭❤~

scratch-blocks 的 core/flyout_vertical.js

scratch-blocks 的 core/flyout_vertical.js 文件中:

在 createDom 函数里面注释掉 clip-path 的添加——这个是上述官方 Scratch 的实现方式,用来控制太长的积木不会超出容器的可显示区域

scratch-blocks 的 core/css.js

scratch-blocks 的 core/css.js 文件中,新增了.blocklyFlyout:hover ,用来控制鼠标悬浮在 flyout 区域时,显示因太长而被裁剪掉的积木。

至此,就完成了这一次的需求实现 ✿✿ヽ(°▽°)ノ✿