P5 SVG imageMode

挫败的

我像这样加载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)在这种环境下不起作用。如何重新居中图像？

冷静

您正在将画布平移到中心，translate(width /2, height / 2);然后绘制图像。如果要使图像居中，只需将画布保留在其原始（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画布与使用此svg模式进行渲染的所有不同含义。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。