项目相关

codecept

electron

electron 通信

sketch

sketch 通信

drag & drop

设置 draggable = true，dragStart 时设置 event.dataTransfer.setData()，drop 事件时通过 event.dataTransfer.getData() 获取自定义数据。拖放文件时可以通过 event.dataTransfer.files 拿到文件。

针对对象 事件名称 说明
被拖动的元素 dragstart 在元素开始被拖动时候触发
drag 在元素被拖动中反复触发
dragend 在拖动操作完成时触发
目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover 当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发
  • 缩放拖拽时 wheel、mousedown、mousemove、mouseup 事件，touchstart、touchmove、touchend 事件。

canvas

为什么 img 换成 canvas 会有优化效果，img 绘制会影响 js 的执行，会造成操作上的不流畅。使用 canvas 会启用硬件加速。

canvas.getContext('2d).drawImage(img, posX, posY, imgWidth, imgHeight) 是位图，在高 dpi 设备上会模糊。 canvas 的画布大小，使用的是 canvas.width 和 canvas.height；要设置画布的实际渲染大小，使用的 style 属性或 CSS 设置的 width 和 height。

1

<canvas width="640" height="800" style="width:320px; height:400px"></canvas>

绘制的时候使用 canvas.scale(radio, radio)。

一些参考资料

算法

react

typescript

AND

纯面试题

最后的最后

坚强 !!! 坚强他环绕着我