p5.js | scale()函数

p5.js 中的scale()函数用于通过扩展或收缩其顶点来增加或减小形状或模型的大小。比例值指定为小数百分比，即“2.0”比例值会将形状的尺寸增加 200%。同样，“-2.0”的负数会将形状的尺寸减小 200%

对象总是从它们的相对原点缩放到坐标系。此函数的 z 参数仅在 WebGL 模式下可用，用于跨 z 轴缩放。

由于scale()是一种转换，因此在一次调用之后发生的每次转换都会使效果倍增。如果在draw()循环中调用scale() ，则在循环再次开始时会重置转换。

句法：

scale( s, [y], [z] )

或者

scale( scales )

参数：此函数接受四个参数，如上所述和如下所述。

• s：它是一个 p5.Vector、Number 或 Numbers 数组，用于定义缩放对象的百分比。如果给出多个参数，它表示在 x 方向上缩放对象的百分比。
• y：它是一个数字，表示在 y 方向上缩放对象的百分比。它是一个可选参数。
• z：它是一个数字，表示在 z 方向上缩放对象的百分比。它是一个可选参数。
• scales：它是一个 p5.Vector 或数字数组，指定每轴百分比来缩放对象。

下面的程序说明了 p5.js 中的scale()函数：

示例 1：

function setup() {
  createCanvas(500, 400);
  textSize(16);
  
  scaleXslider = createSlider(-3, 3, 1, 0.1);
  scaleXslider.position(30, 30);
  
  scaleYslider = createSlider(-3, 3, 1, 0.1);
  scaleYslider.position(30, 50);
}
  
function draw() {
  clear();
  text("Move the sliders to change the scale value", 20, 20);
  fill("red");
  rect(150, 150, 100, 100);
  
  // Get the scale parameters
  let scaleXValue = scaleXslider.value();
  let scaleYValue = scaleYslider.value();
  
  text("Scale x value: " + scaleXValue, 20, 350);
  text("Scale y value: " + scaleYValue, 20, 370);
  
  // Set the scale according to properties
  scale(scaleXValue, scaleYValue);
  
  fill("green");
  rect(150, 150, 100, 100);
}

输出：

示例 2：

function preload() {
  ballObj = loadModel("models/ball.obj", true);
}
  
function setup() {
  createCanvas(500, 300, WEBGL);
  
  scaleXslider = createSlider(-3, 3, 0.5, 0.1);
  scaleXslider.position(30, 30);
  
  scaleYslider = createSlider(-3, 3, 0.5, 0.1);
  scaleYslider.position(30, 50);
  
  scaleZslider = createSlider(-3, 3, 0.5, 0.1);
  scaleZslider.position(30, 70);
  
  debugMode();
}
  
function draw() {
  clear();
  noStroke();
  lights();
  orbitControl();
  
  // Get the scale parameters
  let scaleXValue = scaleXslider.value();
  let scaleYValue = scaleYslider.value();
  let scaleZValue = scaleZslider.value();
  
  // Set the scale according to properties
  scale(scaleXValue, scaleYValue, scaleZValue);
  
  fill("green")
  model(ballObj);
}

输出：

参考： https://p5js.org/reference/#/p5/scale