P5 SVG 图像模式

Question

我像这样加载我的 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) 在这种环境下不起作用。我怎样才能让我的图片再次居中？

Answer 1

您正在将 canvas 平移到中心 translate(width /2, height / 2); 然后绘制图像。如果您希望图像居中，只需将 canvas 保持在其原始 (0,0) 和默认 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's default
  image(mapimg, 0,9);
}

我不熟悉 p5.js-svg 但请注意使用 p5.js canvas 与使用此 svg 模式渲染的所有不同含义。

P5 SVG 图像模式

P5 SVG imageMode

javascript

svg

p5.js