Я работаю с двухосным переменным шрифтом (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
Как управлять осью ширины переменного шрифта в p5.js v2 без использования CSS? ⇐ Javascript
Форум по Javascript
1772025616
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');
}
Подробнее здесь: [url]https://stackoverflow.com/questions/79896234/how-to-control-the-wdth-axis-of-a-variable-font-in-p5-js-v2-without-using-css[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия