話癆
公司要開發一個類似datav的畫布組件。整體框架采用的Vue，拖拽縮放這塊使用的jquery ui。
在開發中，發現畫布大小是設置的，然后通過容器的大小去將實際的畫布大小進行縮放，在畫布上就會使用到scale屬性，然而發現，加了之后就是個坑，jquery ui 的拖拽，縮放都出現了問題，然后發現就是因為縮放之后導致偏移量不一直造成的。
拖拽
從最開始原生入手，看是否可以解決，于是有了如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 800px;
background: #000000;
height: 800px;
transform: scale(0.50);
position: relative;
}
.nr{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="content">
<div class="nr">
<div id="main" style="width: 100px;height: 100px;position: absolute;left: 50px;top: 0px">
<div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div>
<!--<div class="box"></div>-->
</div>
</div>
</div>
<script>
var l = 0.5
function Mover(title) {
this.obj = title;
this.startx = 0;
this.starty;
this.startLeft;
this.startTop;
this.mainDiv = title.parentNode;
var that = this;
this.isDown = false;
this.movedown = function(e) {
e = e ? e : window.event;
if(!window.captureEvents) {
this.setCapture();
} //事件捕獲僅支持ie
// 函數功能：該函數在屬于當前線程的指定窗口里設置鼠標捕獲。一旦窗口捕獲了鼠標，
// 所有鼠標輸入都針對該窗口，無論光標是否在窗口的邊界內。同一時刻只能有一個窗口捕獲鼠標。
// 如果鼠標光標在另一個線程創建的窗口上，只有當鼠標鍵按下時系統才將鼠標輸入指向指定的窗口。
// 非ie瀏覽器 需要在document上設置事件
that.isDown = true;
that.startx = e.clientX;
that.starty = e.clientY;
that.startLeft = parseInt(that.mainDiv.style.left) * 0.5;
that.startTop = parseInt(that.mainDiv.style.top) * 0.5;
console.log('that.startLeft:', that.startLeft)
console.log('that.startTop:', that.startTop)
console.log('startx:', that.startx)
console.log('starty:', that.starty)
}
this.move = function(e) {
e = e ? e : window.event;
if(that.isDown) {
that.mainDiv.style.left = (e.clientX - (that.startx - that.startLeft))/l + "px";
that.mainDiv.style.top = (e.clientY - (that.starty - that.startTop))/l + "px";
}
}
this.moveup = function() {
that.isDown = false;
if(!window.captureEvents) {
this.releaseCapture();
} //事件捕獲僅支持ie
}
this.obj.onmousedown = this.movedown;
this.obj.onmousemove = this.move;
this.obj.onmouseup = this.moveup;
//非ie瀏覽器
document.addEventListener("mousemove", this.move, true);
}
var mover = new Mover(document.getElementById("title"));
</script>
</body>
</html>
發現是可以解決的，需要將縮放比例進行計算下。
到這OK，所實話，自己去寫一個比較完善的拖拽也是比較花時間，所以還是想直接在jquery ui上能否直接解決。
查看源碼，發現有這么一行代碼：
_mouseDrag: function(event, noPropagation) {
// reset any necessary cached properties (see #5009)
if ( this.offsetParentCssPosition === "fixed" ) {
this.offset.parent = this._getParentOffset();
}
//Compute the helpers position
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
//Call plugins and callbacks and use the resulting position if something is returned
if (!noPropagation) {
var ui = this._uiHash();
if(this._trigger("drag", event, ui) === false) {
this._mouseUp({});
return false;
}
this.position = ui.position;
}
// 問題就在這個地方,position這個保存了拖拽元素的實際位置，然而是不計算scale這比例的
if(!this.options.axis || this.options.axis !== "y") {
this.helper[0].style.left = this.position.left +"px";
}
if(!this.options.axis || this.options.axis !== "x") {
this.helper[0].style.top = this.position.top+"px";
}
if($.ui.ddmanager) {
$.ui.ddmanager.drag(this, event);
}
return false;
},
既然知道了position的問題，那么我直接在這個地方加上計算的縮放比例，成功解決了拖拽時候偏移的問題。接下來就是縮放比例會動態變動，需要暴露一個接口出去可以去設置這個縮放比例，既然思路對了就去干，等會上代碼。
var o = this.options
if(!this.options.axis || this.options.axis !== "y") {
this.helper[0].style.left = this.position.left / o.scale +"px";
}
if(!this.options.axis || this.options.axis !== "x") {
this.helper[0].style.top = this.position.top / o.scale +"px";
}
唉，拖拽解決了，縮放這又是個坑，同樣思路走不通了，明天再踩~~
縮放
開始沿用拖拽思路發現怎么改都不對，后面發現在方法:_mouseDrag中里面就計算了移動變量，那么直接在這個地方進行就改就好了，修改完成之后，完美~~~
