在p5.js Javascript Framework中动态更改小齿轮的大小

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

我有一个项目，需要通过编辑已创建对象的x_pos和y_pos属性来移动可收藏的项目。

我可以使它正常工作，但是该对象也应该根据对象的size属性动态调整大小，而我尝试过的所有操作都会使三角形遍布整个地方，或者会改变大小但还会移动位置。

非常感谢您的帮助。请参见下面的代码。

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;

}
javascript shapes p5.js
1个回答
0
投票

一般来说，要更改工程图中单个对象的大小，请执行以下步骤

  • 调用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.