# 參考線實現
> 項目需求,需要實現一個參考線的UI功能,找了好久沒有相應的插件使用。類似于ps的參考線
>
知乎的鏈接也被刪除了,只有這個還有記錄著。
大致思路如下:
~~~
let auxiliary_line_arr = []; // 需要添加的輔助線列表
function 監聽鼠標按下事件的回調{
auxiliary_line_arr=[];
}
function 監聽鼠標移動事件的回調{
const adsorp_arr = [];
1.獲取移動對象邊界
2.獲取所有的對象的邊界
3.進行邊界比對 {
1.先判斷是否靠近邊界
2.再判斷是否有相交或者要相交的對象
if(差值<5px的時候){
auxiliary_line_arr.push({要畫的線的坐標點});
adsorp_arr.push(吸附參數);
}
}
4.實現吸附
adsorp_arr.map(() => {
if( Math.abs(移動對象的x-吸附[value]) <= 5 ){
設置移動對象的x = 吸附[value];
}
})
}
// 任何移動或者改變操作都會觸發這個方法
function 監聽畫布重新渲染被調用的方法{
auxiliary_line_arr.map((k) => 向畫布中添加一條線; );
}
function 監聽鼠標釋放事件的回調{
auxiliary_line_arr = [];
}
~~~
要點
* 邊界值碰撞檢查。
[sf社區回答](https://segmentfault.com/q/1010000003900409)
- 前端
- pc端
- 京東無延時菜單效果
- datapicker組件的編寫
- cursor禁止默認樣式
- 移動端
- web在真機調試
- 有關vue的上拉加載
- 下拉刷新
- vue獲取dom節點
- worker技術
- h5頁面喚醒手機撥號,發短信功能
- 彈出層喚醒擠壓css背景圖片
- 23模式
- 基礎模式
- SMD同步模塊
- canvas
- 點的均勻分布
- 線條繪畫
- canvas常見的全局屬性
- 判斷點在某個區間內
- 保證動畫效果的流暢性
- arc函數學習
- cookies
- 本地服務搭建
- Mint UI框架的學習
- 第一天
- Swiper組件的解析
- loadmore組件
- 二維碼的生成
- 前端優化
- 瀏覽器緩存
- indexdb本地數據庫的使用
- 淺談前端優化
- css漸變屬性
- 前端常用組件學習
- picker組件
- vue
- 模塊下的state訪問
- vue的進階
- npm包的發布
- 淘寶移動端適配問題
- vue的生命周期的理解
- vue的路由學習
- vue自帶的動畫效果
- vue 項目里,img標簽報錯,添加默認圖片
- axios 實現loading加載提示
- qs庫
- vue的v-for指令無法使用在tr、td中
- vue打包之后,npm run dev 空白
- vue 單頁面百度統計
- unix時間轉化
- UI組件的實現
- picker
- upload組件
- js動畫效果
- canvas甜甜圈的編寫
- 瀑布流實現
- 適配問題
- 圖片加載
- js基礎知識
- js數組合并
- 響應布局總結
- 組件開發
- grid組件
- 專題頁面常用布局頁面
- scroll滾動問題
- 項目整理經驗收集
- 畫圖工具應用實現記錄
- 參考線實現
- JCode
- 多條件篩選不用ajax的原因分析
- node
- koa路由下的分塊
- 連接數據庫mysql
- 初步搭建數據庫模型
- java
- spring框架的學習
- maven 搭建web項目
- 建站
- 關聯github
- 雜文
- 后端常用成熟系統
- node實戰練習
- 編寫郵箱通知
- 微信小程序
- 模板之坑
- 模板坑之數據傳入
- 小程序組件化之一
- 有關this的綁定
- 小程序組件化之二
- 小程序分包加載
- tab切換,頁面狀態不更新
- 小程序請求組件(草稿)
- php學習之路
- 文件上傳
- 有關數據庫時間類型的插入
- Ubuntu下的php開啟擴展模塊
- windows系統下的hosts文件位置
- 騰訊云的cos
- thinkPHP
- 模塊設計
- 模型的使用
- ajax的請求異常總結
- apache服務器
- 虛擬主機的建立
- ssh的使用
- ftp服務器配置
- Lamp的搭建
- ftp從零開始配置
- https的配置
- git hooks實現簡單的自動部署
- ubuntu系統登錄遠程ubuntu服務器
- ubuntu
- 新建用戶需要使用sudo
- sftp的文件上傳問題
- 配置apache部分問題總結
- git服務器的搭建
- githook的學習
- ubuntu 虛擬主機搭建
- ubunut的服務器的防火墻的關閉
- 寶塔部署laravel
- 關于寶塔phpmyadmin無法訪問的問題
- 解決碼云每次提交輸入密碼的問題
- mysql
- phpmyadmin的安裝
- 遠程登陸數據庫
- git的使用
- 拉去分支的代碼
- git remote指令
- 學習臨時筆記
- ios兼容性問題
- 蘋果獲取屏幕寬度問題
- toDataURL無法導出圖片
- 蘋果觸屏滾動,下拉刷新問題
- jquery動畫
- jquery的animate無法使用transform
- jquery隊列queue
- css重學之路
- 規范一
- css3的matrix屬性
- 淘寶適配方案
- Yii框架學習
- gd庫的支持安裝
- larval框架學習
- 中間件
- 指令
- 自定義指令生成token
- 微信登錄后端篇
- 寶塔apache配置ssl
- SVN
- PS
- 快捷鍵
- Redis
- Redis在Unbtun下的配置
- 微信公眾號開發
- 測試號配置