在 p5.js Javascript 框架中动态更改小三角的大小

Question

我有一个项目，我需要通过编辑创建的 object.

的 x_pos 和 y_pos 属性来移动我的收藏品

我可以让它正常工作，但是 object 也应该根据 object 的大小属性动态调整大小，我尝试过的所有方法都可以三角形到处都是，或者会改变大小但也会移动位置。

非常感谢任何帮助。请参阅下面的代码。

var floorPos_y;

var gameChar_x;
var gameChar_y;

var treePos_x;
var treePos_y;

var canyon;
var collectable;

var mountain;
var cloud;


function setup()
{
    createCanvas(1024, 576);
    floorPos_y = 432; //NB. we are now using a variable for the floor position

    //NB. We are now using the built in variables height and width
    gameChar_x = width/2;
    gameChar_y = floorPos_y;

    treePos_x = width/2;
    treePos_y = floorPos_y - 100;

    canyon = {
        x_pos: 300,
        width: 100
    }

    collectable = {
        x_pos: 100,
        y_pos: 100,
        size: 50
    }
}

function draw()
{
    background(100, 155, 255); //fill the sky blue

    noStroke();
    fill(0, 155, 0);
    rect(0, floorPos_y, height, width - floorPos_y); //draw some green ground

    //Tree
    fill(83,49,24);
    //rect(900,332,50,100);
    rect(treePos_x,treePos_y,50,100);
    fill(34,139,34);
    triangle(treePos_x - 50,treePos_y + 25,
             treePos_x + 100,treePos_y + 25,
             treePos_x + 25,treePos_y - 75);
    triangle(treePos_x - 50,treePos_y,
             treePos_x + 100,treePos_y,
             treePos_x + 25,treePos_y - 100);

    //Canyon
    fill(74,38,25);
    rect(canyon.x_pos + 50,432,100,144);
    fill(0,155,0);
    triangle(canyon.x_pos + 50,432,
             canyon.x_pos + 50,532,
             canyon.x_pos + 75,457);
    triangle(canyon.x_pos + 150,576,
             canyon.x_pos + 150,476,
             canyon.x_pos + 125,501);

    //Collectible Item
    fill(255,215,0);
    ellipse(collectable.x_pos + 210,
            collectable.y_pos + 317,
            15,15);
    fill(155,17,30);
    triangle(collectable.x_pos + 200,
             collectable.y_pos + 315,
             collectable.x_pos + 220,
             collectable.y_pos + 315,
             collectable.x_pos + 210,
             collectable.y_pos + 295);
    triangle(collectable.x_pos + 200,
             collectable.y_pos + 320,
             collectable.x_pos + 220,
             collectable.y_pos + 320,
             collectable.x_pos + 210,
             collectable.y_pos + 340);


    //character facing forward
    //Head
    fill(236, 188, 180);
    ellipse(gameChar_x, gameChar_y - 50, 30);

    //Hat
    fill(98, 74, 46);
    ellipse(gameChar_x, gameChar_y - 60, 40,10);
    rect(gameChar_x - 8.75, gameChar_y - 75, 17.5,15);

    //Body
    fill(72,61,139);
    rect(gameChar_x - 10, gameChar_y - 37, 20,30);

    //Feet
    fill(0);
    rect(gameChar_x - 12.5, gameChar_y - 10, 10, 10);
    rect(gameChar_x + 2.5, gameChar_y - 10, 10, 10);



}

function mousePressed()
{
    //Set position of character upon mouse click
    gameChar_x = mouseX;
    gameChar_y = mouseY;

}

Answer 1

通常要更改绘图中单个对象的大小，请按照以下步骤操作

调用push保存绘图状态。这很重要，因为我们不想改变绘图其他部分的大小
转换到应该绘制对象的位置
scale 到新尺寸
translate 如果我们需要调整对象的位置以适应新的大小
相对于 0,0 绘制对象
pop恢复绘图状态，不影响绘图的其他部分

这是应用于您的 draw() 函数的这些原则中有趣的部分

push()// save current drawing state
translate(treePos_x, treePos_y); // move to position of tree
var scaleFactor = 0.75; // scale down by a quarter
scale(scaleFactor);
// this translate is after scaling so it will adjust according to the new size
translate(25*scaleFactor*-1, 50*scaleFactor*-1);
//Tree
fill(83,49,24);
rect(0,0,50,100); // the object is drawn as if it is at 0,0
fill(34,139,34);
triangle(-50, 25,
         100, 25,
         25, -75);
triangle(-50,0,
         100,0,
         25,-100);
pop(); // restore

这是您的代码片段，其中包含用于调整树大小的缩放代码。请注意如何更改 scaleFactor 并更改树的大小，但其他一切保持不变。

var floorPos_y;

var gameChar_x;
var gameChar_y;

var treePos_x;
var treePos_y;

var canyon;
var collectable;

var mountain;
var cloud;


function setup()
{
    createCanvas(1024, 576);
    floorPos_y = 432;

    gameChar_x = width/2;
    gameChar_y = floorPos_y;

    treePos_x = width/2 + 25; // add 25 to get to the middle of the tree
    treePos_y = floorPos_y - 50;

    canyon = {
        x_pos: 300,
        width: 100
    }

    collectable = {
        x_pos: 100,
        y_pos: 100,
        size: 500
    }
}

function draw()
{

    background(100, 155, 255); //fill the sky blue

    noStroke();
    fill(0, 155, 0);
    rect(0, floorPos_y, height, width - floorPos_y);
    push()// save current drawing state
    translate(treePos_x, treePos_y); // move to position of tree
    var scaleFactor = 0.75; // scale down by a quarter
    scale(scaleFactor);
    // this translate is after scaling so it will adjust according to the new size
    translate(25*scaleFactor*-1, 50*scaleFactor*-1);
    //Tree
    fill(83,49,24);
    rect(0,0,50,100); // the object is drawn as if it is at 0,0
    fill(34,139,34);
    triangle(-50, 25,
             100, 25,
             25, -75);
    triangle(-50,0,
             100,0,
             25,-100);
    pop(); // restore
    //Canyon
    fill(74,38,25);
    rect(canyon.x_pos + 50,432,100,144);
    fill(0,155,0);
    triangle(canyon.x_pos + 50,432,
             canyon.x_pos + 50,532,
             canyon.x_pos + 75,457);
    triangle(canyon.x_pos + 150,576,
             canyon.x_pos + 150,476,
             canyon.x_pos + 125,501);

    //Collectible Item
    fill(255,215,0);
    ellipse(collectable.x_pos + 210,
            collectable.y_pos + 317,
            15,15);
    fill(155,17,30);
    triangle(collectable.x_pos + 200,
             collectable.y_pos + 315,
             collectable.x_pos + 220,
             collectable.y_pos + 315,
             collectable.x_pos + 210,
             collectable.y_pos + 295);
    triangle(collectable.x_pos + 200,
             collectable.y_pos + 320,
             collectable.x_pos + 220,
             collectable.y_pos + 320,
             collectable.x_pos + 210,
             collectable.y_pos + 340);


    //character facing forward
    //Head
    fill(236, 188, 180);
    ellipse(gameChar_x, gameChar_y - 50, 30);

    //Hat
    fill(98, 74, 46);
    ellipse(gameChar_x, gameChar_y - 60, 40,10);
    rect(gameChar_x - 8.75, gameChar_y - 75, 17.5,15);

    //Body
    fill(72,61,139);
    rect(gameChar_x - 10, gameChar_y - 37, 20,30);

    //Feet
    fill(0);
    rect(gameChar_x - 12.5, gameChar_y - 10, 10, 10);
    rect(gameChar_x + 2.5, gameChar_y - 10, 10, 10);
}

function mousePressed()
{
    //Set position of character upon mouse click
    gameChar_x = mouseX;
    gameChar_y = mouseY;

}

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

在 p5.js Javascript 框架中动态更改小三角的大小

Dynamically Change a traingles size in p5.js Javascript Framework

javascript

shapes

p5.js