弹力球

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const svg = document.querySelector('svg');
const curve = document.getElementById('curve');
const controlPoint = document.getElementById('control-point');
const posXLabel = document.querySelector('.posX');
const posYLabel = document.querySelector('.posY');
const svgViewBoxWidth = 190;

let isMouseDown = false;
let point = {
  x: 95,
  y: 80
};

function updateCurve(x, y) {
  let svgRect = svg.getBoundingClientRect();
  let scale = svgRect.width / svgViewBoxWidth;
  let width = (svgRect.width / scale) - 5;
  let height = (svgRect.height / scale) - 6;
  
  // update point coordinates to mouse/touch position when dragging
  if (x && y) {
    point.x = Math.ceil((x - svgRect.x) / scale);
    point.y = Math.ceil((y - svgRect.y) / scale);
  }
  
  // clamp the coordinates to the limits of the SVG viewbox
  point.x = point.x < 5 ? 5 : point.x;
  point.y = point.y < 5 ? 5 : point.y;
  point.x = point.x > width ? Math.ceil(width) : point.x;
  point.y = point.y > height ? Math.ceil(height) : point.y;

// update coordinate labels
  posXLabel.textContent = point.x.toFixed(2);
  posYLabel.textContent = point.y.toFixed(2);

// update coordinates for control point and curve
  controlPoint.setAttribute('cx', point.x);
  controlPoint.setAttribute('cy', point.y);
  curve.setAttribute('d', curve.getAttribute('d').replace(/Q (\d+(\.\d+)?) (\d+(\.\d+)?)/, `Q ${point.x} ${point.y}`));
}

function onMouseDown() {
  isMouseDown = true;
}

function onMouseMove(ev) {
  if (isMouseDown) {
    updateCurve(ev.clientX, ev.clientY);
  }
}

controlPoint.addEventListener('mousedown', onMouseDown);
controlPoint.addEventListener('touchstart', onMouseDown);

document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', (ev) => {
  updateCurve(ev.touches[0].clientX, ev.touches[0].clientY);
});

document.addEventListener('mouseup', onMouseUp);
document.addEventListener('touchend', onMouseUp);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg