石家庄裕华区网站建设,万网博通,云服务器的作用,南昌快速优化排名大家好#xff0c;我是前端西瓜哥。
今天来讲讲如何在图形编辑器中使用自定义光标#xff0c;并对光标其进行管理。 编辑器 github 地址#xff1a; https://github.com/F-star/suika 线上体验#xff1a; https://blog.fstars.wang/app/suika/ 自定义光标的意义是什么我是前端西瓜哥。
今天来讲讲如何在图形编辑器中使用自定义光标并对光标其进行管理。 编辑器 github 地址 https://github.com/F-star/suika 线上体验 https://blog.fstars.wang/app/suika/ 自定义光标的意义是什么
光标游标在图形界面交互中是非常基础的一环。
它是一个指针悬浮在屏幕的最上层。除了可以标记出指针的当前位置同时也会通过它独特的样式提示用户此时可以执行怎么的操作。
比如抓手grab光标是一个展开的手掌表示可以对目标进行拖拽操作。
缩放xx-resize光标是一个有方向的单双箭头表示可以往特定方向移动以改变目标大小。
长得像英文字母 I 的文字text光标则提示可以进行文字的操作细瘦的垂直线是为了更好地点中字符之间的空白区域。
点击pointer光标一根手指食指不是中指伸出来是要干嘛是为了试探看到按钮就尝试点一下表示某个区域是可点击的。 操作系统有丰富的光标样式可以选择在 Web 网页中可以通过 cursor 样式属性进行设置。
对于一般应用来说通常是够用的。但对于一个成熟的图形编辑器来说这还远远不够。
我们还需要一些 更具体的光标样式来向用户传递信息比如
旋转光标表示图形可旋转。cursor 属性中没有旋转光标勉强可用抓手工具做个平替支持任意度数的缩放光标。cursor 属性的缩放光标只有 45 度的正数倍数光标这精度远远不够。钢笔工具相关光标钢笔光标、锚点光标、新增/删除点光标
等等。 此外自定义光标还有一个很重要的作用就是 实现不同平台的视觉一致性。
不同操作系统的 UI 风格是不同的它们的光标是相当不一致的会给用户带来不同的体验。
我希望在 Windows 系统看到 MacOS 的光标
如何支持自定义光标 没有光标我们自己造。 好在 cursor 是支持自定义光标的。
具体用法如下。
.suika-cursor-default {cursor: url(./cursor-icons/suika-cursor-default.png) 5 5, pointer;
}值依次为
url(url)自定义光标的图片资源 url因为不大且不希望额外作为单独资源加载通常会选择转换为 base64 格式内嵌x y使用相对图片左上角的像素位置作为光标位置keyword如果没有指定自定义光标图片或者加载光标资源失败就会使用浏览器支持的光标值比如 pointer。
我们需要绘制好光标图片然后导出为 png背景为透明度然后定义好 x 和 y再通过 css 类包裹一下然后根据需要在 Canvas 上设置对应的 css 样式即可。 多种旋转角度的旋转和缩放光标
有两种光标比较特殊它们有特殊的旋转角度的参数。
它们就是旋转和缩放光标。 因为 cursor 这个 css 属性并不支持设置旋转角度所以我们只能绘制 0 到 359 之间度数共 360 个不同的旋转光标图片。
缩放光标因为其样式中心对称的原因倒是不需要这么多只要绘制 0 到 179 共 180 个图片。
然后是 精细度的问题。
你这里可以整一些猫腻比如偷懒抽走一些度数只给偶数的度数比如 2、4奇数的度数都丢掉没有 1、3 这些度数。设置光标的时候舍入一下找最接近的度数。
或者你精益求精你说间隔 1 度未免太大我们要更精确一点我们不仅支持整数我们还要支持 1.5、6.5 这种中间值我们要用 720 个图片。
没问题都可以上。
批量生成方案
但是呢我们发现这些光标其实都来自一个源图片只是旋转了不同的角度我们手工一个个操作未免太低效了。
这时候我们就可以自己写或找一些工具批量对一张源图形生成旋转多种角度后的图片然后再写个脚本去自动生成 css 代码把这些图片引入进去。
这是一个方案figma 是这么做的。
感觉还是有亿点麻烦。没事我们有另一个方案。
上面做的是打包前生成大量图片那我们可不可以在运行时动态生成光标呢
可以的。图片有位图的也有矢量的啊我们可以用一种叫做 SVG 的特殊图片格式它的内容是文本一种的 xml 文本。
我们可以将光标 UI 导出为 SVG然后在最顶层的元素加上 transform 的旋转变换。
可以写一个方法传入角度和位置信息动态生成对应的 SVG 字符串然后转成 DataURL 给 cursor 应用上。
大概像这样
const getRotationIconDataUrl (degree, x 0, y 0) {return url(data:image/svgxml,...g fillnone transformrotate(${degree} ${x} ${y})...) ${x} ${y}, pointer
}canvas.style.cursor getRotationIconDataUrl(114.544);开源白板工具 tldraw 选择了这个方案。 你可以给一个精度很高的旋转度数。 模块设计
代码设计上我们会设计一个 CursorManager 类进行光标的管理。
这个类最重要的作用就是设置光标值。
setCursor 方法接收一个光标值除了支持传统的字符串也支持 { type: rotation; degree: 45 } 这种形式。
它主要做了如下操作
标准化光标值比如把度数取余到 0360 内比较新旧光标值相同就跳过清空原来设置的光标样式根据光标不同执行各自的逻辑。
下面是核心代码实现。
// 支持的光标类型
export type ICursor | default| { type: resize; degree: number }| { type: rotation; degree: number }| grab| ...
}class CursorManager {private cursor: ICursor;setCursor(cursor: ICursor) {// 1. 标准化光标值比如把度数取余到 0360 内cursor this.normalizeCursor(cursor);// 2. 比较新旧光标值相同就跳过if (isEqual(cursor, this.cursor)) {return;}this.cursor cursor;const clsPrefix suika-cursor-;// 3. 清空原来设置的光标样式canvasElement.classList.forEach((className) {if (className.startsWith(clsPrefix) {canvasElement.classList.remove(className);}});this.editor.canvasElement.style.cursor ;// 4. 根据光标不同执行各自的逻辑if (this.customClassCursor.has(cursor)) {// 这个是注册了 class 的光标const className ${clsPrefix}${cursor};this.editor.canvasElement.classList.add(className);} else if (typeof cursor string) {// 用浏览器自带的this.editor.canvasElement.style.cursor cursor;} else if (cursor.type resize) {// 后面都是使用动态 svg 字符串this.setResizeCursorInCanvas(cursor.degree);} else if (cursor.type rotation) {this.setRotationCursorInCanvas(cursor.degree);}}
}绘制在画布上的光标
光标还有一种比较少用的方案也说说吧。
就是有些光标是绘制在画布上的。
一个经典的例子就是 AutoCAD 的十字光标这个十字的长度是可以设置的可以相当长。 如果你修改操作系统的光标那这个十字便会突破天际地显示到非绘制区域上。
此外AutoCAD 的光标并不忠实跟随操作系统光标比如有时候会吸附于某点不动并基于它的位置显示下拉菜单此时可以用真正的光标去点选。 考虑到性能建议把光标放到另一个 canvas 上和图形放一个 canvas 会让画布中没做任何操作的图形频繁重绘。
结尾
总结一下。
关于图形编辑器的光标我们有以下方案
使用浏览器本身就提供的一些光标值。优点是成本低缺点是样式有限且不同操作系统风格差异大cursor 支持自定义光标所以我们可以自己设置自己的一套光标去应用。但其中有一些比较特殊的有各种旋转方向的光标需要做特别的处理。一种是用工具批量生产光标图片一种是利用 svg 在运行时动态生成最后是在画布上渲染光标的方案适合一些有特殊需求的图形编辑器。这类图形编辑器的光标往往可以自定义且可以非常大或是它们在某些场景下会脱离鼠标的控制喜欢特立独行比如突然吸附到某个吸附点上。缺点是实现比较复杂你可能需要像管理图形一样去管理它。
我是前端西瓜哥欢迎关注我学习更多图形编辑器知识。
