Как управлять осью ширины переменного шрифта в p5.js v2 без использования CSS?Javascript

Форум по Javascript
Ответить
Anonymous
 Как управлять осью ширины переменного шрифта в p5.js v2 без использования CSS?

Сообщение Anonymous »

Я работаю с двухосным переменным шрифтом (wght и ширина) в p5.js v2. Я могу легко анимировать ось веса, используя шрифт Weight().
Как я могу контролировать ширину (wdth) таким же образом?
Я не хочу изменять стиль CSS с помощью JavaScript. Я хочу использовать метод text("word", x, y), чтобы позже прочитать его пиксели с холста.
Вот мой код:
JavaScript:

let vid;
let scl = 10;
let ratio = 128 / 72;
let font;
let stamps

async function setup() {
font = await loadFont("/BeyondVF.ttf");
let cnv = createCanvas(windowHeight * ratio, windowHeight);

let newCanvasX = (windowWidth - windowHeight * ratio) / 2;
cnv.position(newCanvasX, 0);

textAlign(CENTER, CENTER);

stamps = createGraphics(windowHeight * ratio, windowHeight);
}

function draw() {
background(0);
stamps.background(0);

let Fweight = map(mouseX, 0, height, 300, 700);
let Fwidth = map(mouseY, 0, width, 100, 200);
stamps.textWeight(Fweight);

stamps.textFont("khat");
stamps.textSize(500);
stamps.fill(255);
stamps.noStroke();
stamps.text("A", windowWidth/2, windowHeight/2);

let whitness = 200;

for (let i = 0; i < width; i += 5) {
for (let j = 0; j < height; j += 5) {
let pixelColor = stamps.get(i, j);
let r = pixelColor[0];
let g = pixelColor[1];
let b = pixelColor[2];
if (r > whitness && g > whitness && b > whitness) {
fill(255,255,255);
circle(i + random(-3,3), j+random(-3,3), 5);
}
}
}
// Update the canvas.
updatePixels();

function windowResized() {
resizeCanvas(windowHeight * ratio, windowHeight);
vid.size(width / scl, height / scl);
}
}

CSS:

html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

@font-face{
font-family:'khat';
src:url('/BeyondVF.ttf')format('truetype');
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... -using-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»