网络摄像机在画布大小固定为p5.js时拉伸

Question

我正在尝试做三件事：

1. 纵横比16：9
2. 中间的三角形
3. 顶部的网络摄像头

我正在尝试使不同的计算机在同一位置具有一个三角形，并且整个画布的比例为16：9，但是当前发生的情况是它正在拉伸视频输入。

有什么想法吗？

https://www.openprocessing.org/sketch/870510

var video;

function setup() {
createCanvas(1100, 619);
background(255);
video = createCapture(VIDEO);
video.size(1100,619); 
video.hide();
}

function draw() {
image(video,0,0,width,height); 
strokeWeight(4);
line(400, 400, 550, 150);
line(550, 150, 700, 400);
line(700, 400, 400, 400);     
 }

Answer 1

首先您需要获得窗口width，然后您可以计算纵横比为16：9的画布height

var video;

var h, w;

function setup() {
   // get window width
   w = window.innerWidth;
   // calculate canvas height
   h = (w * 9) / 16;
   // create canvas
   createCanvas(w, h);
   background(255);
   video = createCapture(VIDEO);
   video.size(w, h); 
   video.hide();

}

然后将三角形设为中心，我们可以通过将height和width除以​​2]来计算中心>

function draw() {
   // calculate center
   var cx = w / 2;
   var cy = h / 2;
   // set the triangle width
   var width = 150;
   var half_width = width / 2;
   // calculate the triangle height using pythagoras theorm
   var height = Math.sqrt(width * width - half_width * half_width);
   var half_height = height / 2;
   // draw bottom of the triangle
   line(cx - half_width, cy + half_height, cx + half_width, cy + half_height);
   // draw left of the triangle
   line(cx - half_width, cy + half_height, cx, cy - half_height);
   // draw right of the triangle
   line(cx, cy - half_height, cx + half_width, cy + half_height);
}