P5 SVG imageMode

Question

P5 SVG imageMode

1

Я загружаю свой mapbox-Link, как это, и он работает:

var mapimg;

function preload () {
  mapimg = loadImage('mapbox-LINK');
}

function setup() {
  createCanvas(1024,720);
  translate(width /2, height / 2);
  imageMode (CENTER); 
  image(mapimg, 0,0);
}

Но когда я изменяю craeteCanvas() чтобы craeteCanvas(, , SVG) он отскакивает и ведет себя странно. Я использую zenozeng для рендеринга холста.svg. Я думаю, что именно imageMode(CENTER) не работает в этой среде. Как я могу снова центрировать изображение?

foliran 29 окт. 2018, в 12:48

Источник

0

Моя карта: api.mapbox.com/styles/v1/foliran/cjnrcb1pm1vbw2rqkbw3o5uog/…
foliran 29 окт. 2018, в 11:16
0

Что вы имеете в виду, когда говорите, что используете режим SVG? Я не вижу, что упомянуто в ссылке нигде?
Kevin Workman 29 окт. 2018, в 17:04

Теги:

javascript

svg

p5.js

1 ответ

Ещё вопросы

Моя карта: api.mapbox.com/styles/v1/foliran/cjnrcb1pm1vbw2rqkbw3o5uog/…
Что вы имеете в виду, когда говорите, что используете режим SVG? Я не вижу, что упомянуто в ссылке нигде?

cal_br_mar · Accepted Answer · 2018-10-30T05-17-00.000Z

Вы переводите свой холст в центр translate(width/2, height/2); затем рисуем изображение. Если вы хотите, чтобы изображение было центрировано, просто сохраните холст на его исходном (0,0) и default imageMode (CORNER)

var mapimg;

function preload () {
  mapimg = loadImage('https://api.mapbox.com/styles/v1/foliran/cjnrcb1pm1vbw2rqkbw3o5uog/static/10.4209538,51.1657564,5/1024x720?access_token=pk.eyJ1IjoiZm9saXJhbiIsImEiOiJjam5yZXA0Z2gwNnlmM2twcDJrNnlxdHJkIn0.vSpVuibxadIaVGb4JiPn_w');
}

function setup() {
  createCanvas(1024,720,SVG);
  // translate(width /2, height / 2); //no need to translate
  // imageMode (CORNER); //no need to imageMode, as it default
  image(mapimg, 0,9);
}

Я не знаком с p5.js-svg, но будьте осторожны со всеми различными последствиями рендеринга, используя p5.js canvas vs, используя этот режим svg.