弹性

弹性

关注
发信
关注(28)粉丝(399)

javascript - Canvas 框架用于交互式弹性线？

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        4年前关闭。
                    
                
        

我想为我的网页创建一个交互式的弹性线，当用户将其悬停时，它将像弹性效果或橡皮筋拉伸效果一样进行动画处理，鼠标离开该对象将恢复为原始形状。

演示对象

javascript - Canvas 框架用于交互式弹性线？-LMLPHP

我是HTML5 Canvas中的新手，我希望它可以通过JavaScript画布库完成，但是当我搜索最佳画布库时，我会得到更多选择，所以我对实现目标的选择感到困惑。 ThreeJs，fabricJs，PaperJs等是流行的画布库。

我想建议哪种框架最适合我的目标。

感谢并感谢您的帮助心态。

最佳答案

您将需要使用反向运动学，或更具体地说是Kinematic Chain。

有许多方法或多或少复杂。这是一种简单的方法，可让您拖动终点，其余的将跟随。它不是完美的，但可能会达到此目的。

（反向）运动链

主要功能如下。它假定定义了一个带有点的数组以及一个distance变量：

// calculate IK chain (from last to first)
function calc() {

    var angle, i, p1, p2;

    for(i = points.length - 1; i > 0; i--) {
        p1 = points[i];                                // current point
        p2 = points[i-1];                              // previous point
        angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);  // calc angle

        p2.x = p1.x + distance * Math.cos(angle);      // update previous point
        p2.y = p1.y + distance * Math.sin(angle);      // based on a fixed distance
    }
}


注意，distance变量设置为固定长度，这是此处的关键。

现在我们需要做的就是检测鼠标拖动链中的最后一点，其余的跟随。

行动链



var c = document.querySelector("canvas"),
	ctx = c.getContext("2d"),

    // the chain - dragged by the *last* point
	points = [
		{x: 50, y: 50},
		{x: 100, y: 60},
		{x: 90, y: 90},
		{x: 120, y: 110},
		{x: 200, y: 80},
		{x: 250, y: 130}
	],
	distance = 50,
	isDown = false;

// set canvas size
resize();
window.onresize = resize;

function resize() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  calc();
  render()
}

// handle mouse
c.onmousedown = function(e) {
  var pos = getXY(e),
      p = points[points.length - 1];

  isDown = (pos.x > p.x - 7 && pos.x < p.x + 7 && pos.y > p.y - 7 && pos.y < p.y + 7);
};

window.onmousemove = function(e) {
  if (!isDown) return;

  points[points.length - 1] = getXY(e);    // override last point with mouse position

  // update chain and canvas
  calc();
  render();
};

window.onmouseup = function() {isDown = false};

// adjusted mouse position
function getXY(e) {
	var rect = c.getBoundingClientRect();
	return {
		x: e.clientX - rect.left,
		y: e.clientY - rect.top
	}
}

// IK chain calculations
function calc() {

	var angle, i, p1, p2;

	for(i = points.length - 1; i > 0; i--) {
		p1 = points[i];
		p2 = points[i-1];
		angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);

		p2.x = p1.x + distance * Math.cos(angle);
		p2.y = p1.y + distance * Math.sin(angle);
	}
}

// render line and handle
function render() {

	var lp, radius = 7;

	ctx.clearRect(0, 0, c.width, c.height);

	// render current chain
	ctx.beginPath();
	ctx.moveTo(points[0].x, points[0].y);
	for(var i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
	ctx.lineWidth = 3;
	ctx.strokeStyle = "#07f";
	ctx.stroke();

	lp = points[points.length - 1];

	// draw handle
	ctx.beginPath();
	ctx.moveTo(lp.x + radius, lp.y);
	ctx.arc(lp.x, lp.y, radius, 0, Math.PI*2);
	ctx.lineWidth = 2;
	ctx.strokeStyle = "#900";
	ctx.stroke();
}

<canvas></canvas>





回到根源

为了使其反弹，您需要原始坐标，然后在链中插入相应的点。

当然，这将在鼠标向上事件中发生。如果愿意，可以使用缓动功能。这种情况下，缓动可能是最合适的。

反弹

本示例并不打算解决整个问题，也没有对其进行优化，但是，您应该能够了解所需要的要点。根据需要进行修改。

为了这个工作：


现在，render函数接受一个参数，因此我们可以将其输入任何点数组
我们需要在固定点（原始路径）和IK链之间进行插值。为此，我们使用一个临时数组。
我们在t为[0，1]时进行动画处理
完成后，我们将IK点重置为原始点，然后重新计算/渲染它。
我还为链段添加了最小/最大，以显示如何独自使链更具弹性。




var c = document.querySelector("canvas"),
    ctx = c.getContext("2d"),

    // the fixed point chain
    pointsFixed = [
      {x: 50, y: 50},
      {x: 100, y: 60},
      {x: 90, y: 90},
      {x: 120, y: 110},
      {x: 200, y: 80},
      {x: 250, y: 130}
    ],

    // for the IK chain - dragged by the *last* point
    points = [
      {x: 50, y: 50},
      {x: 100, y: 60},
      {x: 90, y: 90},
      {x: 120, y: 110},
      {x: 200, y: 80},
      {x: 250, y: 130}
	],

    min = 40, max = 70,
    isDown = false,

    // for animation
    isPlaying = false,
    t, step = 0.1;       // t = [0, 1]

// set canvas size
resize();
window.onresize = resize;

function resize() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  calc();
  render(points)
}

// handle mouse
c.onmousedown = function(e) {
  var pos = getXY(e),
      p = points[points.length - 1];

  isDown = (pos.x > p.x - 7 && pos.x < p.x + 7 && pos.y > p.y - 7 && pos.y < p.y + 7);
};

window.onmousemove = function(e) {
  if (!isDown) return;

  points[points.length - 1] = getXY(e);    // override last point with mouse position

  // update chain and canvas
  calc();
  render(points);
};

window.onmouseup = function() {
  if (isDown) {
    isDown = false;
    t = 0;                // reset t for new animation
    isPlaying = true;     // allow looping
    animate();            // start the animation
  }
};

// adjusted mouse position
function getXY(e) {
  var rect = c.getBoundingClientRect();
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  }
}

// IK chain calculations
function calc() {

  var angle, i, p1, p2, dx, dy, distance;

  for(i = points.length - 1; i > 0; i--) {
    p1 = points[i];
    p2 = points[i-1];
    dx = p2.x - p1.x;
    dy = p2.y - p1.y;
    angle = Math.atan2(dy, dx);
    distance = Math.max(min, Math.min(max, Math.sqrt(dx*dx + dy*dy)));

    p2.x = p1.x + distance * Math.cos(angle);
    p2.y = p1.y + distance * Math.sin(angle);
  }
}

// interpolate and animate
function animate() {
  if (isPlaying) {

    // create a temp. array with interpolated points
    for(var i = 0, p, pts = []; i < points.length; i++) {
      pts.push(lerp(points[i], pointsFixed[i], t*t));  // t*t for easing
    }

    // increase t in animation
    t += step;

    // keep animating?
    if (t <= 1) {
      render(pts);
      requestAnimationFrame(animate)
    }
    else {
      // we're done
      isPlaying = false;
      points = pts;
      calc();
      render(points);
    }
  }

  function lerp(p1, p2, t) {
    return {
      x: p1.x + (p2.x - p1.x) * t,
      y: p1.y + (p2.y - p1.y) * t
    }
  }
}

// render line and handle
function render(points) {

  var lp, radius = 7;

  ctx.clearRect(0, 0, c.width, c.height);

	// render current chain
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for(var i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
  ctx.lineWidth = 3;
  ctx.strokeStyle = "#07f";
  ctx.stroke();

  lp = points[points.length - 1];

  // draw handle
  ctx.beginPath();
  ctx.moveTo(lp.x + radius, lp.y);
  ctx.arc(lp.x, lp.y, radius, 0, Math.PI*2);
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#900";
  ctx.stroke();
}

<canvas></canvas>

关于javascript - Canvas 框架用于交互式弹性线？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36335142/

10-09 18:42
Powered by LMLPHP ©2024 弹性 0.048114