自定义图表随心所欲拉伸编辑--随意拖拽拉伸功能的实现

2023-12-22 03:39:10

了解HTML5原生拖拽 drag

1-1、了解拖拽事件的流程

其实拖拽功能的实现无非就是绑定几个拖拽事件就可以了，现在浏览器原生就支持拖拽功能，我们只要按照浏览器制定的流程就可以实现出拖拽效果了，具体事件流程如下：

1. 鼠标指针在元素上按下并停留一段时间。
2. 鼠标指针在元素上移动。
3. 鼠标指针松开。

对应的，在浏览器中，鼠标触发拖拽事件的具体流程如下：

1. mousedown 事件：当鼠标按下并停留一段时间时，触发 mousedown 事件。
2. dragstart 事件：当鼠标按下并移动时，触发 dragstart 事件。
3. drag 事件：当鼠标持续移动时，触发 drag 事件。
4. dragend 事件：当鼠标松开时，触发 dragend 事件。

1-2、使用原生drag事件实现拖拽

使用原生drag事件实现拖拽的步骤如下：

首先，给元素添加 dragstart 事件监听器，并设置元素可拖拽：

element.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', element.id);
});

然后，给元素添加 drag 事件监听器，并设置元素的位置：

element.addEventListener('drag', function(e) {
  e.preventDefault();
  element.style.left = e.clientX - element.offsetWidth / 2 + 'px';
  element.style.top = e.clientY - element.offsetHeight / 2 + 'px';
});

最后，给元素添加 dragend 事件监听器，并重置元素的样式：

element.addEventListener('dragend', function(e) {
  element.style.left = '';
  element.style.top = '';
});

1-3、注意

当使用原生drag事件实现拖拽时，需要注意以下几点：

使用 e.dataTransfer.setData() 方法设置拖拽数据时，必须使用 text/plain 作为第一参数，否则在某些浏览器中可能无法触发 dragstart 事件。
使用 e.preventDefault() 方法阻止默认的拖拽行为，否则元素可能会被拖拽到其他位置。
使用 element.style.left 和 element.style.top 属性设置元素的位置，而不是使用 element.offsetLeft 和 element.offsetTop 属性，因为后者会在元素被拖拽到浏览器窗口外时返回错误的值。

使用SVG实现可缩放图表

2-1、使用SVG创建可缩放图表

要使用SVG创建可缩放图表，可以使用 <svg> 元素和 <path> 元素。<svg> 元素用于定义SVG图像，<path> 元素用于定义图像中的路径。

<svg width="100%" height="100%">
  <path d="M0,0 L100,0 L100,100 L0,100 Z" />
</svg>

上面的代码创建了一个简单的矩形，其宽度和高度都是100%。

2-2、使用JavaScript实现图表缩放

要使用JavaScript实现图表缩放，可以使用 SVGMatrix 对象。SVGMatrix 对象表示一个2D仿射变换矩阵，它可以用来缩放、旋转、平移和倾斜SVG元素。

var svg = document.querySelector('svg');

var matrix = svg.getCTM();

matrix.scale(2, 2);

svg.setAttribute('transform', 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')');

上面的代码将图表缩放为原来的两倍。

实现随意拖拽拉伸功能

3-1、实现鼠标拖拽拉伸

为了实现鼠标拖拽拉伸功能，我们需要用到鼠标事件。当鼠标在图表上按下时，记录下鼠标的位置；当鼠标移动时，计算出鼠标移动的距离，并使用这个距离来调整图表的大小。

var svg = document.querySelector('svg');

svg.addEventListener('mousedown', function(e) {
  var startX = e.clientX;
  var startY = e.clientY;

  document.addEventListener('mousemove', function(e) {
    var dx = e.clientX - startX;
    var dy = e.clientY - startY;

    svg.setAttribute('width', svg.getAttribute('width') + dx);
    svg.setAttribute('height', svg.getAttribute('height') + dy);

    startX = e.clientX;
    startY = e.clientY;
  });

  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove');
  });
});

上面的代码实现了鼠标拖拽拉伸功能。当鼠标在图表上按下时，记录下鼠标的位置；当鼠标移动时，计算出鼠标移动的距离，并使用这个距离来调整图表的大小。当鼠标松开时，移除鼠标移动事件监听器。

3-2、实现触摸屏拖拽拉伸

为了实现触摸屏拖拽拉伸功能，我们需要用到触摸事件。当手指在图表上按下时，记录下手指的位置；当手指移动时，计算出手指移动的距离，并使用这个距离来调整图表的大小。

var svg = document.querySelector('svg');

svg.addEventListener('touchstart', function(e) {
  var touch = e.touches[0];

  var startX = touch.clientX;
  var startY = touch.clientY;

  document.addEventListener('touchmove', function(e) {
    var touch = e.touches[0];

    var dx = touch.clientX - startX;
    var dy = touch.clientY - startY;

    svg.setAttribute('width', svg.getAttribute('width') + dx);
    svg.setAttribute('height', svg.getAttribute('height') + dy);

    startX = touch.clientX;
    startY = touch.clientY;
  });

  document.addEventListener('touchend', function() {
    document.removeEventListener('touchmove');
  });
});