在開發Canvas繪畫應用（三）：實現對照繪畫中，我們實現了視圖引導的第一部分，這一篇我們來完成第二部分，即將圖片直接拖到畫布上進行繪畫。
✁ 拖放如何實現？
【拖放的基本概念】：創建一個絕對定位的元素，使其可以用鼠標或手指移動。
注意，為了使元素能被拖放，它必須是絕對定位的。
然后，我們需要填充我們的 touchF 函數來實現拖動功能，添加了 this.dragging 用於判斷是否是拖動狀態，只有當 touchmove 觸發的時候才為 true。另外，當拖動的時候，需要改變目標對象的位置，通過 clientX 和 clientY 來進行更改。
touchF(e) {
e.preventDefault(); // 阻止瀏覽器默認行為
const touches = e.changedTouches;
const point = touches[0];
let el = e.target,
$el = $(e.target);
switch (e.type) {
case 'touchstart':
// 觸摸點起始坐標，不帶單位
this.p_start = {
x: point.clientX,
y: point.clientY
}
// 圖片起始坐標，因為帶單位，所以用parseFloat進行轉換
this.el_start = {
x: parseFloat($el.css('left')),
y: parseFloat($el.css('top'))
};
break;
case 'touchmove':
this.dragging = true;
// 觸摸點移動坐標差值，不帶單位
let diffX = point.clientX - this.p_start.x,
diffY = point.clientY - this.p_start.y;
if (this.dragging) {
// 隨觸摸點坐標更改目標元素的坐標
$el.css({
'left': this.el_start.x + diffX,
'top': this.el_start.y + diffY
});
}
break;
case 'touchend':
if (!this.dragging) {
this.setStyle($(e.target)); // 切換視圖顯示狀態
this.setBasePlate(e.target); // 切換底板顯示狀態
}
this.dragging = false;
break;
default:
this.dragging = false;
break;
}
}
▶▶▶ 在獲取視圖對象的坐標位置時，除了上述用到的 css() 方式，還有下面兩種：
// 采用jquery的offset方法獲取坐標，注意里面的屬性不是x和y，而是left和top
this.el_start = this.$el.offset();
// 又或者采用getBoundingClientRect來獲取坐標，也要注意left和top屬性
this.el_start = this.el.getBoungdingClientRect();
但是這里有一個大坑！！！也是我們不采用后兩種方式，而采用 css() 方式的原因，這跟元素在css中如何定位有關，下面來看看這個坑。
我們當前視口的大小是 980×874，有兩種css方式可以將元素居中定位，但是獲取位置時會有區別：
【方式1】：正確的打開方式
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
通過不同的方式獲取坐標：
console.log('通過css()方式獲取：');
console.log({
left: parseFloat($el.css('left')),
top: parseFloat($el.css('top'))
});
console.log('通過offset()方式獲取：');
console.log($el.offset());
console.log('通過getBoungdingClientRect()方式獲取：');
console.log(el.getBoundingClientRect());
而在實現中，通過第一種css()方法獲取坐標時進行對象移動是正常的，后兩種都會在移動時將圖片往左偏移100像素，為什么呢？因為在css中獲取的就是元素的left值，即通過 left:50% 后偏離的 490px，是不包含transform 變換的，因此才會多出來100像素。
【方式2】：求解答
margin: auto;
top: 20px;
left: 0;
right: 0;
z-index: 3;
同樣通過不同的方式獲取坐標得到:
☹ 這里有個坑，就是左右移動的時候，當距離增大時，觸摸點跟圖片的距離會越來越增大，即圖片移動的速度更不上觸摸點移動的速度，上下移動時是好的，求大神解答。。。。
▲▲▲ 因此，為什么 css() 方式可以實現我們的正常不偏移位置的拖動，因為我們用的是絕對定位！！而在更改元素坐標時，采用的是加上坐標差的方式，即在原先 left 值的基礎上加上偏移量。好吧，得承認這一塊坑死我了T^T。
AnyWay，附上實現效果：
✁ 克隆對象
當前，我們移動的是視圖本身，但是我們想要原本的視圖不動，移動它的一個復制圖片，這就需要克隆一個當前對象，在 touchstart 中進行實現：
// 克隆一個對象
this.$clone = $el.clone();
this.$clone.insertBefore($el.siblings()[0]).css({
'z-index': 4,
'border': 'none'
});
然后我們對這個克隆對象進行位置操作便可。
✁ 判斷是否拖入畫布
- 接着，我們需要判斷是否將圖片拖入畫布，這需要對畫布的坐標進行判斷；
- 然后，當拖入的時候，在畫布上調用
drawImage()方法進行繪畫，否則，這個克隆對象將回到原始位置，和目標圖片重合； - 最后，無論是否進入，當
touchend觸發時，都需要銷毀這個克隆對象。
① 整理邏輯，在 touchend 時進行判斷：
case 'touchend':
// 獲取克隆元素的寬高及坐標
let clone_rect = (this.$clone)[0].getBoundingClientRect();
if (!this.dragging) {
this.setStyle($el); // 切換視圖顯示狀態
this.setBasePlate(el); // 切換底板顯示狀態
// 如果進入畫布
} else if (this.intoPainter(clone_rect)) {
this.setBasePlate(); // 清空底板
this.drawResult(el); // 在painter上進行繪畫
// 否則回到初始狀態
} else {
}
this.dragging = false;
this.$clone.remove(); // 移除clone對象
break;
② 完善 intoPainter 函數，判斷是否進入畫布
/**
* 判斷是否進入了 painter 畫布
* @param {[object]} srcRect 進入畫布對象的大小及在視口中的坐標信息
* @return {[boolean]}
*/
intoPainter(srcRect) {
const rect = this.painter.getBoundingClientRect();
// 上下左右邊界判斷
let cL = srcRect.left > rect.left,
cT = srcRect.top > rect.top,
cR = srcRect.right < rect.right,
cB = srcRect.bottom < rect.bottom;
return cL && cT && cR && cB;
}
③ 在 pinter.js 中完善 drawResult() 函數：
/**
* 繪制拖入的圖片
* @param {[type]} image 視圖對象，原生js <img>
* @return {[type]} [description]
*/
drawResult(image) {
this.clearBg(); // 清除畫布
this.ctx.drawImage(image, 0, 0, this.config.cvaW, this.config.cvaH);
}
