当画布大小固定为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);
// get video scaling ratio
var ratio = h / video.height;
// recalculate video width
var video_w = video.width * ratio;
video.size(video_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);
}