以鼠标为核心展开的前端需求

前端以鼠标事件为核心展开的需求，大概就是现在做的线上批改这样的功能。 基本上就是下面几个点。 修改鼠标的形状 通过 cursor 中的 url 把鼠标换成图片的样子。引入图片后，此时点击后获取到的坐标是图片的左上角坐标，所以要让图片以中心点为点击时的坐标的话。可在url 后增加数字 x，y来修改（空格分隔）。 最后以防图片类型不被支持，后面必须跟随CSS规范中定义的一个关键字（逗号分隔）。 鼠标点击时，相对于左上角x,y的距离 当初忘记了offsetX，offsetY这两个属性了。但这个属性，却在React中的合成事件的属性中找不到。 要用浏览器的底层事件需要 e.nativeEvent，才可以看到offsetX。 文字框 文字框高度自适应： 直接在div上用了H5的一个 contenteditable 属性，指定元素内容是可编辑。 在div的onInput事件上通过e.currentTarget.textContent来获取输入的内容。 文字框可拖动改变位置： 也是直接在div上用 draggable 属性，指定某个元素是否可以拖动，这样子就有个拖动的样子。（记得把 contenteditable 属性改为false，不然只有在边边角角才可以拖动了）。 通过 onDragStart 记录此时的位置，在 onDragEnd 事件获取的此时坐标减去之前的坐标，然后修改定位就好了。 画矩形框 画矩形框的话，就是通过鼠标事件去做。 通过 onMouseDown 记录此时点击的坐标 drawRectXY，在 onMouseMove 中根据是否存在坐标drawRectXY，来动态改变矩形框的宽高（此时获取到的坐标减去之前记录的坐标），最后在 onClick 中清除之前记录的坐标。 画波浪线 本来有想过通过 text-decoration: underline wavy blue，然后不断在内容增加 以达到波浪线的效果，但是其实不太好。 最后还是用了 background: url center repeat-x;不断重复的背景去完成。

本文章由javascript技术分享原创和收集