let _this = this;
this.svg.d3 = d3.select('svg');
this.svg.height = this.svg.d3.node().clientHeight;
this.svg.width = this.svg.d3.node().clientWidth;
this.svg.x = _this.svg.d3.node().getBoundingClientRect().left; // svg 位置
this.svg.y = _this.svg.d3.node().getBoundingClientRect().top;
let startFunc = function () {
// console.log('start')
_this.svg.d3.style('cursor', 'pointer')
_this.isMouseDown = true;
if (d3.event.type == 'touchstart') {
if (d3.event.touches.length == 2) {
let x1 = d3.event.touches[0].pageX;
let y1 = d3.event.touches[0].pageY;
let x2 = d3.event.touches[1].pageX;
let y2 = d3.event.touches[1].pageY;
_this.touchDis = Math.pow(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2), 1 / 2);
// _this.test = x1 + "-" + y1 + "-" + x2 + "-" + y2;
// _this.test = _this.touchDis;
} else {
_this.preMousePos = {
x: d3.event.touches[0].pageX - _this.svg.x,
y: d3.event.touches[0].pageY - _this.svg.y
}
}
} else {
_this.preMousePos = {
x: d3.event.x - _this.svg.x,
y: d3.event.y - _this.svg.y
}
}
_this.curDragDis = {
dx: 0, dy: 0,
};
_this.svg.d3.selectAll('rect,path,g,text').style('user-select', 'none');
}
let moveFunc = function () {
if (_this.isMouseDown == true) {
let velocity = 0.4;
let mX = 0;
let mY = 0;
console.log(d3.event);
if (d3.event.type == 'touchmove' && d3.event.touches.length == 2) { // 双指
let x1 = parseInt(d3.event.touches[0].pageX);
let y1 = parseInt(d3.event.touches[0].pageY);
let x2 = parseInt(d3.event.touches[1].pageX);
let y2 = parseInt(d3.event.touches[1].pageY);
let dis = Math.pow(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2), 1 / 2)
let more = (dis - _this.touchDis) / 300; // 300 可调节
let mX = (x1 + x2) / 2 - _this.svg.x;
let mY = (y1 + y2) / 2 - _this.svg.y;
let velocity = 0.01 * more;
let transX = mX - _this.dragDistance.dx;
let transY = mY - _this.dragDistance.dy;
_this.dragDistance.dx -= transX * velocity;
_this.dragDistance.dy -= transY * velocity;
_this.scale = (_this.scale * (1 + velocity)).toFixed(3);
_this.svg.d3.selectAll('rect,path,g,text').attr('transform',
'translate(' + parseInt(_this.dragDistance.dx) + ',' + parseInt(_this.dragDistance.dy) + ') scale(' + _this.scale + ')')
} else {
if (d3.event.type == 'touchmove') {
mX = d3.event.touches[0].pageX - _this.svg.x;
mY = d3.event.touches[0].pageY - _this.svg.y;
} else {
mX = d3.event.x - _this.svg.x;
mY = d3.event.y - _this.svg.y;
}
_this.curDragDis.dx = ((mX - _this.preMousePos.x) * velocity);
_this.curDragDis.dy = ((mY - _this.preMousePos.y) * velocity);
// console.log(_this.dragDistance.dx + "-" + _this.dragDistance.dy);
_this.svg.d3.selectAll('rect,path,g,text').attr('transform',
'translate(' + parseInt(_this.dragDistance.dx + _this.curDragDis.dx)
+ ','
+ parseInt(_this.dragDistance.dy + _this.curDragDis.dy) + ') scale(' + _this.scale + ')')
}
}
};
let wheelFunc = function () {
// console.log(d3.event)
let mX = d3.event.x - _this.svg.x;
let mY = d3.event.y - _this.svg.y;
let velocity = 0.01 * (d3.event.wheelDelta / 120);
let transX = mX - _this.dragDistance.dx;
let transY = mY - _this.dragDistance.dy;
_this.dragDistance.dx -= transX * velocity;
_this.dragDistance.dy -= transY * velocity;
_this.scale = _this.scale * (1 + velocity);
_this.svg.d3.selectAll('rect,path,g,text').attr('transform',
'translate(' + parseInt(_this.dragDistance.dx) + ',' + parseInt(_this.dragDistance.dy) + ') scale(' + _this.scale + ')')
}
let endFunc = function () {
_this.svg.d3.style('cursor', 'default')
_this.isMouseDown = false;
_this.dragDistance.dx += _this.curDragDis.dx; // 当前移动距离
_this.dragDistance.dy += _this.curDragDis.dy;
}
this.svg.d3
.on('mousedown', startFunc)
.on('touchstart', startFunc)
.on('mousemove', moveFunc)
.on('touchmove', moveFunc)
.on('touchend', endFunc)
.on('mousewheel', wheelFunc)
.on('mouseup', endFunc)
