將拖動的線限制為給定長度的弧/半徑-有解無憂

我目前正在使用將拖動的線限制為給定長度的弧/半徑

問題是我懷疑這是非常數學，我的數學非常非常弱。誰能像我五歲一樣解釋我需要對我的代碼做些什么來實作這一目標？

編輯：根據要求在此處添加代碼片段：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 400,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var path;
var curve;
var graphics;

var game = new Phaser.Game(config);

function preload() {
    this.load.spritesheet('dragcircle', 'https://labs.phaser.io/assets/sprites/dragcircle.png', { frameWidth: 16 });
}

function create() {
    graphics = this.add.graphics();

    path = { t: 0, vec: new Phaser.Math.Vector2() };

    curve = new Phaser.Curves.Line([ 400, 390, 300, 230 ]);

    var point0 = this.add.image(curve.p0.x, curve.p0.y, 'dragcircle', 0);
  
    var point1 = this.add.image(curve.p1.x, curve.p1.y, 'dragcircle', 0).setInteractive();
  
    point1.setData('vector', curve.p1);

    this.input.setDraggable(point1);

    this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
        gameObject.x = dragX;
        gameObject.y = dragY;
      
        gameObject.data.get('vector').set(dragX, dragY);
    });

    this.input.on('dragend', function (pointer, gameObject) {
      let distance = Phaser.Math.Distance.Between(curve.p0.x, curve.p0.y, curve.p1.x, curve.p1.y);
      console.log(distance);
    });
}

function update() {
    graphics.clear();
    graphics.lineStyle(2, 0xffffff, 1);

    curve.draw(graphics);

    curve.getPoint(path.t, path.vec);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>

uj5u.com熱心網友回復：

是的，您可能需要一些數學運算，但移相器具有大部分所需的功能，可以完成繁重的作業。

主要思想是

定義一個maxLength
獲取拖動的新點，并創建一個真正的Phaser Vector2
- 這里需要一些數學運算，要創建向量，只需計算目標點減去原點
  new Phaser.Math.Vector2(pointer.x - point0.x, pointer.y - point0.y)（原點是所需向量的起點，目標點是滑鼠指標）
計算創建的向量的長度并將其與maxLength
- 如果太長調整向量，使用方便的功能setLength（鏈接到檔案，這是你需要數學的地方，但幸運的是 Phaser 為我們做了）
point1為和curve端點設定新坐標

這是一個快速演示（基于您的代碼）：

var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 170,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var curve;
var graphics;

var game = new Phaser.Game(config);

function preload() {
    this.load.spritesheet('dragcircle', 'https://labs.phaser.io/assets/sprites/dragcircle.png', { frameWidth: 16 });
}

function create() {
    graphics = this.add.graphics();

    curve = new Phaser.Curves.Line([ config.width/2, config.height - 20, config.width/2, 10 ]);

    // define a length, could be a global constant
    let maxLength = curve.p0.y - curve.p1.y;

    var point0 = this.add.image(curve.p0.x, curve.p0.y, 'dragcircle', 0);
    var point1 = this.add.image(curve.p1.x, curve.p1.y, 'dragcircle', 0).setInteractive();
  
    this.input.setDraggable(point1);
    
    // Just add for Debug Info
    this.add.circle(curve.p0.x, curve.p0.y, maxLength)
      .setStrokeStyle(1, 0xffffff, .5)

    this.input.on('drag', function (pointer) {
        
        let vector = new Phaser.Math.Vector2(pointer.x - point0.x, pointer.y - point0.y);
        let distance = Phaser.Math.Distance.Between( point0.x, point0.y, pointer.x, pointer.y);
        
        if(distance > maxLength){
            vector.setLength(maxLength);
        }
        
        point1.x = point0.x   vector.x;
        point1.y = point0.y   vector.y;     
        curve.p1.x = point1.x;
        curve.p1.y = point1.y;

    });

    // NOT REALLY NEEDED
    /*this.input.on('dragend', function (pointer, gameObject) {
      let distance = Phaser.Math.Distance.Between(curve.p0.x, curve.p0.y, curve.p1.x, curve.p1.y);
      console.log(distance);
    });*/
}

function update() {
    graphics.clear();
    graphics.lineStyle(2, 0xffffff, 1);
    curve.draw(graphics);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

可選 - 代碼版本使用Phaser.GameObjects.Line：

這使用了更少的代碼，并且感謝LineGameObject（鏈接到檔案），您可以直接使用vector更新行，也不需要update函式，graphics等等。

const config = {
    type: Phaser.CANVAS,
    width: 500,
    height: 160,
    scene: {
        create
    }
};

const game = new Phaser.Game(config);
const MAX_LINE_LENGTH = 100;

function create() {

    let points = [ {x: config.width/2, y: config.height - 20}, {x: config.width/2, y: config.height - 120} ];
    
    let point0 = this.add.circle(points[0].x, points[0].y, 6)
        .setStrokeStyle(4, 0xff0000);
    let point1 = this.add.circle(points[1].x, points[1].y, 6)
        .setStrokeStyle(4, 0xff0000)
        .setInteractive();
  
    this.input.setDraggable(point1);
    
        // Just add for Debug Info
    this.add.circle(point0.x, point0.y, MAX_LINE_LENGTH)
      .setStrokeStyle(1, 0xffffff, .5);
    
    let line = this.add.line(points[0].x, points[0].y, 0, 0, 0, -100, 0x00ff00)
        .setOrigin(0);
  
    this.input.on('drag', function (pointer) {
        
        let vector = new Phaser.Math.Vector2(pointer.x - point0.x, pointer.y - point0.y);
        let distance = Phaser.Math.Distance.Between( point0.x, point0.y, pointer.x, pointer.y);
        
        if(distance > MAX_LINE_LENGTH){
            vector.setLength(MAX_LINE_LENGTH);
        }
        
        point1.x = point0.x   vector.x;
        point1.y = point0.y   vector.y;     
      
        line.setTo(0, 0, vector.x, vector.y);
    });

}

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520205.html

標籤：javascript数学html5-画布移相器框架

上一篇：如何找出陣列中是否存在等差數列

下一篇：使用百分比python完全計數器之前的時間