Gemini 提示词

OrangBus大约 9 分钟

Canvas 标注工具实现

创建一个基于 HTML5 Canvas 的“无限画布”标注工具，允许用户在一个模拟的 HTML 文档（底图）上进行视觉标注、绘图和添加备注。系统需完美适配 PC 端及移动端（平板电脑）。实际场景：学员通过做题，可能输入文字，可以上传图片的方式将用户的答案上到后台，后台的看来是可以打开进行批阅

实现功能：

无限画布逻辑：支持平移（Pan）和缩放（Zoom），缩放需以鼠标指针或触控中心为基准。底图渲染：Canvas 背景需模拟渲染复杂的 HTML 结构（标题、段落、列表、代码块、脚注等），作为被标注的对象。

标注工具

1、矩形标记：拖拽生成矩形区域（虚线），自动弹出标记输入框，此时不要隐藏框选框,输入框跟随矩形区域有取消跟确定按钮，点击确定的时候使用虚线将矩形区域进行连接，标记的内容可以拖拽，可以二次标记。

2、自由画笔：支持平滑的线条绘画，适配触控笔（颜色跟粗细刻调整）。 3、标记画笔：标记完成后，跟随弹出备注输入框，不要隐藏笔迹，点击确定的时候使用虚线将矩形区域进行连接，标记的内容可以拖拽，可以二次标记。

4、撤销与存储，平移

创建一个基于 HTML5 Canvas 的“无限画布”标注工具，允许用户在一个模拟的 HTML 文档（底图）上进行视觉标注、绘图和添加备注。系统需完美适配 PC 端及移动端（平板电脑）。
实际场景：学员通过做题，可能输入文字，可以上传图片的方式将用户的答案上到后台，后台的看来是可以打开进行批阅

实现功能：
核心功能要求
• 无限画布逻辑：支持平移（Pan）和缩放（Zoom），缩放需以鼠标指针或触控中心为基准。
• 底图渲染：Canvas 背景需模拟渲染复杂的 HTML 结构（标题、段落、列表、代码块、脚注等），作为被标注的对象。
• 标注工具：
• 矩形标记：拖拽生成矩形区域（虚线），自动弹出标记输入框,输入框跟随矩形区域有取消跟确定按钮，点击确定的时候使用虚线将矩形区域进行连接，标记的内容可以拖拽，可以二次标记。
• 自由画笔：支持平滑的线条绘画，适配触控笔（颜色跟粗细刻调整）。
• 标记画笔：标记完成后，耿穗弹出备注输入框，点击确定的时候使用虚线将矩形区域进行连接，标记的内容可以拖拽，可以二次标记。
• 备注展示逻辑（关键点）：
• 画笔默认的颜色是红色，可以调整自定义画笔的颜色跟粗细
• 字体大小：标注框文字设置为 16px，确保清晰易读。
• 自动换行：备注框设置固定最大宽度（如 240px），文本超出时自动换行。
• 连接线：标注对象与备注框之间需有动态连接线（虚线）。
• 可交互性：备注框中心点支持拖拽，方便用户调整布局。
• 撤销与存储：支持撤销最后一步操作，并能将标注数据持久化存储到 LocalStorage。
• 工具栏固定在底部位置，一个图标跟文字描述
• 正文是通过html渲染的
3. 交互与兼容性要求
• 移动端优化：支持多点触控（Pinch-to-zoom）缩放手势，单指或触控笔绘画，针对平板加宽工具栏点击区域。
• 无感操作：禁用系统默认右键菜单及默认手势缩放（touch-action: none）。
• 编辑器 UI：备注输入框需悬浮显示，在平板上输入时文字大小不触发系统自动放大。
4. 技术栈限制
• 单文件结构：所有 HTML、CSS、JavaScript 必须集成在一个 .html 文件中。
• 原生优先：优先使用原生的 Canvas API。

1. 核心目标
创建一个基于 HTML5 Canvas 的“无限画布”标注工具，允许用户在一个模拟的 HTML 文档（底图）上进行视觉标注、绘图和添加备注。系统需完美适配 PC 端及移动端（平板电脑）。
2. 核心功能要求
• 无限画布逻辑：支持平移（Pan）和缩放（Zoom），缩放需以鼠标指针或触控中心为基准。
• 底图渲染：Canvas 背景需模拟渲染复杂的 HTML 结构（标题、段落、列表、代码块、脚注等），作为被标注的对象。
• 标注工具：
• 矩形标记：拖拽生成矩形区域，自动弹出备注输入框。
• 自由画笔：支持平滑的线条绘画，适配触控笔。
• 备注展示逻辑（关键点）：
• 字体大小：标注框文字设置为 16px，确保清晰易读。
• 自动换行：备注框设置固定最大宽度（如 240px），文本超出时自动换行。
• 连接线：标注对象与备注框之间需有动态连接线（虚线）。
• 可交互性：备注框中心点支持拖拽，方便用户调整布局。
• 撤销与存储：支持撤销最后一步操作，并能将标注数据持久化存储到 LocalStorage。
3. 交互与兼容性要求
• 移动端优化：支持多点触控（Pinch-to-zoom）缩放手势，单指或触控笔绘画，针对平板加宽工具栏点击区域。
• 无感操作：禁用系统默认右键菜单及默认手势缩放（touch-action: none）。
• 编辑器 UI：备注输入框需悬浮显示，在平板上输入时文字大小不触发系统自动放大。
4. 技术栈限制
• 单文件结构：所有 HTML、CSS、JavaScript 必须集成在一个 .html 文件中。
• 原生优先：优先使用原生的 Canvas API。
• 现代审美：使用 Tailwind CSS 风格的 UI 设计，包含圆角、阴影和磨砂玻璃效果。



1、有一个平移的按钮，可以移动页面
2、标记按钮：可以框选一个区域以后弹出一个输入框输入标记的内容，如果标记的内容很长的化，设置一个宽度，内容可以换行，但是需要显示全部标记的内容
3、红笔：当用户在页面上自定义标记了内容以后需要出现一个标记的输入框，用户也可以自定义标记，跟2的标记是一样的
3、手写笔：用户可以在页面上任意书写东西，不需要唐初标记输入框，但是手写笔可以自定义调整颜色跟笔尖的粗细
4、优化一下输入框的ui样式，简约美观一点

创建一个基于 HTML5 Canvas 的“无限画布”标注工具，允许用户加载一张图片（底图，动态传入）上进行视觉标注、绘图和添加备注。系统需完美适配 PC 端及移动端（平板电脑）。
要求：
- 无限画布逻辑：支持平移（Pan）和缩放（Zoom），缩放需以鼠标指针或触控中心为基准。
- 当用户对画布进行操作以后，随即出现一个备注的小图标，用户点击这个小图标后出现一个标记的输入框，输入框有取消跟确定的按钮，标记的内容跟划线的终点使用虚线连接，并且可以拖拽，双击标记的内容的时候可以二次编辑
设置功能（固定在底部）：
画笔的颜色、粗细进行调整
逻辑：
用户传图一张图片的url地址，将图片显示在画布的中间，进行各种标记以后可以保存标记后的结果，同时导出标记后的图片

超喵

帮我生成一个老师使用的作业批改的画板，
需求：用户拍照从前端将自己的答案拍照上传，后端存储以后（这个步骤不需要实现）,老师端在后台可以看到用户上传的图片答案
要求：
1、实现老师端的画板页面，创建一个可缩放的画板，通过传递一张图片地址，将图片显示在画板的中间，老师可以通过画笔或者标记工具对画板进行操作，当使用标记工具的时候，老师划线结束以后弹出一个标记的输入框，编辑后的标注信息可以二次编辑，并且划线跟标注使用虚线进行连接，标注的内容可以拖拽
2、需要使用到的工具：移动工具，标记工具，画笔工具，擦除工具
3、我需要对操作的步骤进行保存，下次打开的时候可以二次编辑

1、批改按钮：画笔颜色粗细可以自定义
2、讲解功能，画笔颜色粗细可以自定义，标记后的内容可以进行任意拖拽