canvas 視覺化操作 拖拽 縮放 移動

2022-09-14 15:18:16 字數 2502 閱讀 5370

canvas拖拽+縮放的實現

/*

canvas 視覺化操作-拖拽&縮放&移動

*/const canvas = document.getelementbyid('canvas');

const ctx = canvas.getcontext('2d');

const stautsconfig =

//畫布資訊

const canvasinfo = , //計算偏移量座標

offsetevtpos: , //偏移事件位置

offset: , //縮放偏移

scale: 1, //縮放比例

scalestep: 0.1, //每次縮放產生的變化量

maxscale: 2, //最大縮放倍數

minscale: 0.5 //最小縮放倍數

}const cirlces = ;

//畫圓

const drawcircle = (ctx, cx, cy, r) =>

// ctx.translate(100, 0);

//檢視層繪製

drawcircle(ctx, 100, 100, 20);

//資料層記錄

cirlces.push()

drawcircle(ctx, 200, 200, 30);

cirlces.push()

/*————————————————拖拽———————————————————*/

//畫布位置

const getcanvasposition = e =>

}//獲取距離

const getdistance = (p1, p2) =>

//判斷是否在圓內

const ifincirlce = (pos) =>

} return false;

}//滑鼠按下

canvas.addeventlistener('mousedown', e =>

})//滑鼠移動

canvas.addeventlistener('mousemove', e => else

//如果第一次距離和第二次之間大於5,代表真正的拖動(防止抖動,一按下就移動的問題)

if (canvasinfo.status === stautsconfig.drag_start && getdistance(canvasposition, canvasinfo.lastevtpos) > 5) else if (canvasinfo.status === stautsconfig.dragging) = canvasinfo;

dragtarget.x += (canvasposition.x - canvasinfo.offsetevtpos.x);

dragtarget.y += (canvasposition.y - canvasinfo.offsetevtpos.y);

//拖拽時候清空並重繪圓

ctx.clearrect(0, 0, canvas.width, canvas.height);

cirlces.foreach(item => drawcircle(ctx, item.x, item.y, item.r));

canvasinfo.offsetevtpos = canvasposition;

}})//滑鼠抬起

canvas.addeventlistener('mouseup', e => )

/*————————————————滾輪縮放———————————————————*/

canvas.addeventlistener('wheel', e =>

//變化偏移量

const = canvasinfo;

const deltax = realcanvasposition.x / canvasinfo.scale * scalestep;

const deltay = realcanvasposition.y / canvasinfo.scale * scalestep;

//上下滾輪分別賦值

if (e.wheeldelta > 0) else

//通過矩陣變換重置當前的座標系

ctx.settransform(canvasinfo.scale, 0, 0, canvasinfo.scale, canvasinfo.offset.x, canvasinfo.offset.y);

ctx.clearrect(0, 0, canvas.width, canvas.height);

cirlces.foreach(item => drawcircle(ctx, item.x, item.y, item.r));

})

操作及視覺化

在 中植入mysqldb 操作前的準備 import mysqldb conn mysqldb connect host localhost user root passwd 619523 db zx wor charset utf8 利用mysqldb建立乙個連線物件 cur conn curso...

vim視覺化操作

v 小v 進入視覺化 v 大v 進入可視行 ctrl v 進入視覺化塊 d刪除選中文字 c修改選中文字,刪除選中的文字,然後輸入想要的內容 r替換選中文字,將選中的文字替換成單個字元 i在選中文字前插入 a在選中文字後插入 gu選中區域轉為小寫 gu選中區域轉為大寫 g 大小寫互調 向右縮排乙個單位...

Hbase視覺化操作頁面

問題是前端如何把乙個可變的量傳給後台來接收並且判斷 下面是我寫的 有大佬可以解決這個問題嗎 hbase 建立表 表名 列族版本號 列族版本號 string tablename request.getparameter tablename string columnname request.getpa...