我应该如何使用 Paper.js 合并形状

问题描述 投票:0回答:1

我有以下代码,但它与 paper.io 之类的游戏的预期不符。它填充了新区域,但不正确。玩家应该返回原来的基地,并且基地没有扩张。我能做些什么?

paper.js
unite
方法也不好,因为它会在底座上留下洞。

paper.setup(document.getElementById('gameCanvas'));

const player = new paper.Path.Circle({
    center: paper.view.center,
    radius: 5,
    fillColor: 'red'
});

let base = new paper.Path.Rectangle({
    point: [paper.view.center.x - 50, paper.view.center.y - 50],
    size: [100, 100],
    fillColor: 'lightblue'
});

let destination = player.position;
let drawing = false;
let playerPath;

paper.view.onMouseMove = function (event) {
    destination = event.point;
};

paper.view.onFrame = function (event) {
    const vector = destination.subtract(player.position);
    if (vector.length > 1) {
        vector.length = 1;
        player.position = player.position.add(vector);

        if (!drawing && !base.contains(player.position)) {
            // Start drawing when moving out of the base
            drawing = true;
            playerPath = new paper.Path({
                segments: [player.position],
                strokeColor: 'lightblue',
                strokeWidth: 2
            });
        } else if (drawing) {
            playerPath.add(player.position);

            // Check if the path intersects with the lightblue areas
            const intersections = base.getIntersections(playerPath);
            if (intersections.length > 0) {
                // Complete the path
                drawing = false;
                playerPath.add(intersections[0].point); // Optional: refine to add intersection point
                playerPath.closed = true;
                playerPath.fillColor = 'lightblue';
                playerPath = null; // Reset the path
            }
        }
        player.bringToFront();
    }
};
canvas {
    width: 800px;
    height: 600px;
    border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<canvas id="gameCanvas"></canvas>

我希望敌人能解决这个问题

javascript html css paperjs
1个回答
0
投票

是的,我的意思是图片上类似的东西。白色形状也应该填充。picture

© www.soinside.com 2019 - 2024. All rights reserved.