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

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...