主页 / 问题 / 851793
Accepted
Arthur
Asked:2020-07-08 23:44:36 +0000 UTC2020-07-08 23:44:36 +0000 UTC

将 Paper.js 转换为纯 JS 代码

  • 772

有一个代码paper.js：

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height 100%;
  border: 1px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/paper@0.11.5/dist/paper-full.min.js"></script>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
   
  var points = 10;
  var length = 15;

  var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 2,
    strokeCap: 'round'
  });

  var start = view.center / [10, 1];
  for (var i = 0; i < points; i++)
    path.add(start + new Point(i * length, 0));

  function onMouseMove(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
      var segment = path.segments[i];
      var nextSegment = segment.next;
      var vector = segment.point - nextSegment.point;
      vector.length = length;
      nextSegment.point = segment.point - vector;
    }
    path.smooth();
  }
</script>

原来的“链子”

无法将其转换为正常的JS. 困难在于它本身path。无法创建它并将其划分为段（部分），然后在事件中对其进行动画处理mousemove。

javascript

1 个回答

  1. Best Answer

    几乎，但“几乎”一般来说，在这里：

    var canvas = document.querySelector("#canvas"),
  context = canvas.getContext("2d"),
  target = {
    x: 0.0,
    y: 0.0
  },
  mouse = {
    x: 0.0,
    y: 0.0
  },
  chain = null;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var Segment = function(size, head, tail) {
  this.size = size;
  this.head = head || {
    x: 0.0,
    y: 0.0
  };
  this.tail = tail || {
    x: this.head.x + size,
    y: this.head.y + size
  };

  this.update = function() {
    var dx = this.head.x - this.tail.x,
      dy = this.head.y - this.tail.y,
      dist = Math.sqrt(dx * dx + dy * dy),
      force = 0.5 - this.size / dist * 0.5,
      strength = 0.998;
    force *= 0.99;
    var fx = force * dx,
      fy = force * dy;
    this.tail.x += fx * strength * 2.0;
    this.tail.y += fy * strength * 2.0;
    this.head.x -= fx * (1.0 - strength) * 2.0;
    this.head.y -= fy * (1.0 - strength) * 2.0;
  };
};
var Chain = function(size, interval) {
  this.links = new Array(size);
  this.update = function(target) {
    var link = this.links[0];
    link.head.x = target.x;
    link.head.y = target.y;
    for (var i = 0, n = this.links.length; i < n; ++i) {
      link = this.links[i];
      link.update();
    }
  };
  var point = {
    x: 0,
    y: 0
  };
  for (var i = 0, n = this.links.length; i < n; ++i) {
    link = this.links[i] = new Segment(interval, point);
    link.head.x = Math.random() * 500;
    link.head.y = Math.random() * 500;
    link.tail.x = Math.random() * 500;
    link.tail.y = Math.random() * 500;
    point = link.tail;
  }
};

function update() {
  target.x += (mouse.x - target.x) * 0.1;
  target.y += (mouse.y - target.y) * 0.1;
  chain.update(target);
}

function draw() {
  canvas.width = canvas.width,
    link = chain.links[0],
    p1 = link.head,
    p2 = link.tail;

  context.beginPath();
  context.moveTo(p1.x, p1.y);
  context.strokeStyle = "red";
  context.lineWidth = 3;
  context.lineJoin = "round";
  context.lineCap = "round";

  for (var i = 0, n = chain.links.length; i < n; ++i) {
    link = chain.links[i];
    p1 = link.head;
    p2 = link.tail;
    context.lineTo(p1.x, p1.y);
    context.lineTo(p2.x, p2.y);
  }

  context.stroke();
}

function init() {
  chain = new Chain(100, 2);

  setInterval(function() {
    update();
    draw();
  }, 5);
}

canvas.onmousemove = function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
};

function resize() {
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
}

window.onresize = resize;

init();
    * {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
  cursor: none;
}

canvas {
  border: 1px solid;
}
    <canvas id="canvas"></canvas>

    • 2

相关问题