在paperjs中怠堪,想要實現(xiàn)畫布整體的 放大/縮小/平移/旋轉 需要計算位置信息,而且不支持鼠標操作名眉,解決方案如下:
npm install paper-control
創(chuàng)建控制類
import paperControl from 'paper-control'
import paper form 'paper'
paper.setup(document.getElementById('mycanvas'))
let control = new paperControl(paper);
// control.reset() // 重置為初始狀態(tài)
然后就可以實現(xiàn)畫布控制了
支持多project同步縮放
import paperControl from 'paper-control'
import paper form 'paper'
let p1 = new paper.project(document.getElementById('mycanvas'))
let p2 = new paper.project(document.getElementById('mycanvas2'))
let p3 = new paper.project(document.getElementById('mycanvas3'))
let control = new paperControl(paper,{isAsyncTransform:true});
// control.reset() // 重置為初始狀態(tài)
也可以設置哪些project跟著一起運動
import paperControl from 'paper-control'
import paper form 'paper'
let p1 = new paper.project(document.getElementById('mycanvas'))
let p2 = new paper.project(document.getElementById('mycanvas2'))
let p3 = new paper.project(document.getElementById('mycanvas3'))
let control = new paperControl(paper,{isAsyncTransform:true,projects:[p1,p2]}); // p1,p2會一起動
// control.reset() // 重置為初始狀態(tài)