P5 SVG imageMode - PullRequest
Новая
       14

P5 SVG imageMode

0 голосов
/ 29 октября 2018

Я загружаю свой 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 Canvas. Я думаю, что imageMode(CENTER) не работает в этой среде. Как я могу снова центрировать свое изображение?

1 Ответ

0 голосов
/ 30 октября 2018

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

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's default
  image(mapimg, 0,9);
}

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

...