Paper.js 在角上再添加 2 个点以获得更高的高度

Question

我从 paper.js 开始，在添加和定位新点时遇到了一些问题。我想在左下角和右下角放置 2 个新点以增加高度。现在我已经玩过演示代码并且我有这个：（见下图）我想用它作为移动的背景。

1。如何再添加 2 个点以腾出更多空间和高度？
2.当我实现这一点时，我如何控制它以使其响应（平板电脑、手机等）？

这是 example code working.

  <script type="text/paperscript" canvas="myCanvas">

  var width, height, center;
  var points = 4;
  var smooth = true;
  var path = new Path();
  var mousePos = view.center / 2;
  var pathHeight = mousePos.y;
  var topLeft = view.center - [80, 80];
  var bottomRight = view.center + [80, 80];
  path.fillColor = {
    gradient: {
            stops: ['#532e8e', '#662e8f']
        },
        origin: topLeft,
        destination: bottomRight
  }
  initializePath();

  function initializePath() {
  center = view.center;
  width = view.size.width;
  height = view.size.height / 4;
  path.segments = [];
  path.add(view.bounds.bottomLeft);
  for (var i = 1; i < points; i++) {
    var point = new Point(width / points * i, center.y);
    path.add(point);
  }
  path.add(view.bounds.bottomRight);
//  path.fullySelected = true;
    console.log(path.segments);
  }

  function onFrame(event) {
  pathHeight += (center.y - mousePos.y - pathHeight)/2;
  for (var i = 1; i < points; i++) {
    var sinSeed = event.count + (i + i % 10) * 100 /2;
    var sinHeight = Math.sin(sinSeed / 200) * pathHeight /2;
    var yPos = Math.sin(sinSeed / 100) * sinHeight + height / 1;
    path.segments[i].point.y = yPos;
  }
  if (smooth)
    path.smooth({ type: 'continuous' });
  }

  // Reposition the path whenever the window is resized:
  function onResize(event) {
  initializePath();
  }

  </script>

Answer 1

为了增加高度，如果我没理解错的话，你可以在路径的开始/结束处再添加两个点（第 26 和 32 行），然后再迭代 2 个点（第 40 行）：working example:

  var width, height, center;
  var points = 12;
  var smooth = true;
  var path = new Path();
  var mousePos = view.center / 2;
  var pathHeight = mousePos.y;
  var topLeft = view.center - [80, 80];
  var bottomRight = view.center + [80, 80];
  path.fillColor = {
    gradient: {
            stops: ['#532e8e', '#662e8f']
        },
        origin: topLeft,
        destination: bottomRight
  }
  initializePath();

  function initializePath() {
  center = view.center;
  width = view.size.width;
  height = view.size.height / 4;
  path.segments = [];
  path.add(view.bounds.bottomLeft);
  path.add(view.bounds.topLeft);
  for (var i = 1; i < points; i++) {
    var point = new Point(width / points * i, center.y);
    path.add(point);
  }
  path.add(view.bounds.topRight);
  path.add(view.bounds.bottomRight);
  path.fullySelected = true;
console.log(path.segments);
  }

  function onFrame(event) {
  pathHeight += (center.y - mousePos.y - pathHeight)/2;
  for (var i = 1; i < points+2; i++) {
    var sinSeed = event.count + (i + i % 10) * 100 /2;
    var sinHeight = Math.sin(sinSeed / 200) * pathHeight /2;
    var yPos = Math.sin(sinSeed / 100) * sinHeight + height / 1;
    path.segments[i].point.y = yPos;
  }
  if (smooth)
    path.smooth({ type: 'continuous' });
  }

  // Reposition the path whenever the window is resized:
  function onResize(event) {
  initializePath();
  }

要使其响应，您可以使用 onResize 事件根据您的 canvas 大小更改行为。

Paper.js 在角上再添加 2 个点以获得更高的高度

Paper.js add 2 more points to corners for more height

javascript

libraries

paperjs

responsive