无需登录 数据私有 本地保存

Canvas 辅助线工具 - 为画布添加标尺和参考线

33
0
0
0

核心功能特性

Canvas 辅助线工具提供了一整套完善的画布参考线管理功能,涵盖参考线的创建、移动、删除、吸附对齐以及自定义设置等多个方面。以下将对各项功能进行详细说明。

水平与垂直参考线创建

用户可以通过从标尺区域拖拽的方式创建水平或垂直参考线。顶部标尺区域用于创建垂直参考线,鼠标从顶部标尺按住并向下拖动即可在目标位置放置一条垂直参考线;左侧标尺区域用于创建水平参考线,鼠标从左侧标尺按住并向右拖动即可放置一条水平参考线。每条参考线在创建后会延伸至画布的完整宽度或高度,为用户提供清晰的视觉参考。

清除全部参考线

当画布上积累了大量参考线需要重置时,用户可以使用"清除全部"功能一键移除画布上所有已创建的参考线。该操作不可撤销,执行前系统会给出确认提示,避免误操作导致参考线丢失。

智能吸附功能(5像素)

工具内置智能吸附系统,默认吸附距离为 5 像素。当用户拖动参考线时,如果参考线距离其他参考线或画布边界在 5 像素以内,参考线会自动吸附到目标位置。吸附功能可以确保参考线之间的间距精确可控,极大提升了对齐效率。用户可以在设置中开启或关闭吸附功能。

自定义参考线颜色

工具允许用户自定义参考线的显示颜色。默认情况下参考线为红色,用户可以根据画布背景和个人偏好选择其他颜色,例如蓝色、绿色、黄色等。合理的颜色选择可以让参考线在不同背景上都保持良好的可见性。

上传图片功能

用户可以上传本地图片作为画布背景,以便在实际设计素材上进行参考线定位。支持常见的图片格式如 PNG、JPG、GIF 等。上传后图片会自动适应画布大小,用户可以在图片上方自由创建和调整参考线,非常适合在已有设计稿上进行布局规划和元素对齐检查。

参考线拖拽移动

已创建的参考线支持自由拖拽移动。用户只需将鼠标悬停在参考线上,当光标变为移动状态时按住鼠标左键即可拖动参考线到新的位置。拖拽过程中参考线的位置会实时更新,松开鼠标后参考线即固定在新位置。这一功能让用户可以灵活调整参考线布局,无需删除后重新创建。

双击删除参考线

对于不需要的参考线,用户只需双击该参考线即可将其快速删除。双击删除操作直观便捷,无需使用额外的菜单或按钮。删除操作会立即生效,画布上的参考线计数也会同步更新。

参考线计数显示

工具会在界面上实时显示当前画布上存在的参考线总数。该计数信息帮助用户了解当前使用的参考线数量,便于进行参考线管理。当参考线数量过多影响视觉效果时,用户可以参考计数信息决定是否需要清理部分参考线。

光标位置实时显示

在用户移动鼠标的过程中,工具会在界面上实时显示当前光标在画布上的精确坐标位置(X 和 Y 值,以像素为单位)。坐标显示会随着鼠标的移动即时更新,为用户提供精确的像素级位置信息。这对于需要精确定位的设计工作来说是极为重要的辅助功能。