＆emsp;＆emsp;在评论业务中，不可避免地会有必要标记图片。这次，最小演示将演示如何在图片上制作矩形。
＆emsp;＆emsp;首先，我们必须理解画布是一个画布，该画布需要在我们要标记的图片的上层上。墨西州在图片上重叠。如图所示：
＆emsp;＆emsp;让我们看一下画布的初始化。IMG和画布中有参考属性。不同之处在于，IMG的REF属性是直接使用的，并且Canvas中的REF为回调函数。当组件被加载或卸载时，它将立即执行。加载时，将当前组件实例的REF恢复接收用作参数，并且在卸载时，Ref Recover Recoverive Null被用作参数。在INITCANVAS函数中，Canvas Ref用Ref of of Ref of of canvas ref引用了帆布节点。画布和抽奖函数初始化了400*400画布。第一个参数是需要绘制的上下文元素：
＆emsp;＆emsp;接下来，我们通过无效关注保存先前的标签位置信息。AddInvalidLocation功能是添加标签位置信息。最需要注意的是我们在使用效率，startDraw，绘制，绘图键和绘图端中收听的三个函数。
＆emsp;＆emsp;当鼠标掉落时，启动Draw是由起点的起点分配的，并且状态位被拖动到状态位。当鼠标移动时，绘制函数将通过Clear Rect函数更新画布，而最新位置则是根据鼠标的最新位置，通过亮点invalid对鼠标进行更新。在确定矩形位置的大小后，填充内容，并绘制绘图的三个步骤以绘制矩形。鼠标抬起时，绘制函数会通过addinvalidLocation添加标签位置，然后初始化标签位置。范围。
＆emsp;＆emsp;在添加标签位置后，在模板中，我们返回到绝对定位div，以实现已标记的矩形。
＆emsp;＆emsp;最后效果：
原始：https：//juejin.cn/post/7098371373164134413