javascript - Parse.js onResize() 与矩形

Question

我对 Paper.js 很陌生，对 JS 不太熟悉(高兴点，这些是一些简单的代表点!)我想在 Canvas 上居中放置一个矩形，我成功了。问题是，我希望在调用 onResize 时该矩形保持在中间，并且文档没有很好地解释这一点，或者至少我没有找到一致的东西。

这是我的代码:

createYearBar(1983, 2015);

function createYearBar(yearStart, yearEnd){
    var yearsToDraw = (yearEnd - yearStart);
    var topLeftX = view.center.x * 0.2;
    var topRightX = view.center.x * 1.8;
    var barSize = topRightX - topLeftX;
    var perYear = (barSize)/yearsToDraw;
    var topleft = new Point(topLeftX, 20);
    var size = new Size(barSize, 30);
    var rect = new Rectangle(topleft, size);
    var barPath = new Path.Rectangle(rect);
    barPath.strokeColor = 'black';
    barPath.fillColor = 'black'
}

所以它会像我想要的那样绘制一个矩形，但当我调整大小时它什么也不做。我不明白为什么，因为这个 view.center.x 应该来自框架。

如果我添加一下会好一点:

function onResize(event) {
    createYearBar(1983, 2015);
}

因为我的栏可以变大但不能变小，因为它只是在现有栏上添加栏。

我的问题是:

我是否需要手动删除并重新创建栏，或者我是否错过了一些琐碎的事情(我假设我错过了一些东西!)？

Answer 1

您错过了一些事情，但您的猜测是正确的:最简单的方法是在每个 resize 事件上销毁并重新创建一个栏。

view.center 在调用时仅返回常规坐标。如果 View 为 300x400，view.center 将在 [150, 200] 返回一个新的 Point 对象。当您调整窗口大小时，它不是更新对象位置的动态点。

问题是当您调整 View 大小时，您没有删除 barPath 对象。如果您的函数返回一个对象而不是在函数作用域内匿名创建一个对象，那么执行此操作会容易得多:

var barPath = createYearBar(1983, 2015);

function createYearBar(yearStart, yearEnd){
    var yearsToDraw = (yearEnd - yearStart);
    var topLeftX = view.center.x * 0.2;
    var topRightX = view.center.x * 1.8;
    var barSize = topRightX - topLeftX;
    var perYear = (barSize)/yearsToDraw;
    var topleft = new Point(topLeftX, 20);
    var size = new Size(barSize, 30);
    var rect = new Rectangle(topleft, size);
    barPath = new Path.Rectangle(rect);
    barPath.strokeColor = 'black';
    barPath.fillColor = 'black';
    return barPath;
}

function onResize(event) {
    barPath.remove();
    barPath = createYearBar(1983, 2015);
}