JSON对象的水平滚动数组

时间:2017-01-13 23:02:36

标签: arrays json scroll processing p5.js

好的,所以我将JSON数组的结果排成一行。他们似乎并没有穿过屏幕。是因为我的txtX = 0;还在抽签?我玩过,但似乎无法解决这个问题,因此,仍然有静态文本: - (

var scores;
var txtX;
var txtY;

function preload() {

scores = loadJSON("stats.json");

}

function setup() {

createCanvas(700, 700);

}

function draw() {

background(254);
var txtX = 0;
var txtY = 550;
var stats = scores.results;
for (var i = 0; i < stats.length; i++) {
textSize(12);
text(stats[i], txtX, txtY);
var wordWidth = textWidth(stats[i]);
var currentOffset = 15;

txtX = txtX + wordWidth + currentOffset;

}

txtX = txtX - 1;


}

这是我的JSON:

{
"description" : "FA Cup results; 7th January 2017.",
"source" : "http://www.bbc.co.uk/sport/football/results",
"results":[
"Manchester United 4-0 Reading",
"Accrington Stanley 2-1 Luton Town",
"Barrow 0-2 Rochdale",
"Birmingham City 1-1 Newcastle United",
"Blackpool 0-0 Barnsley",
"Bolton Wanderers 0-0 Crystal Palace",
"Brentford 5-1 Eastleigh",
"Brighton & Hove Albion 2-0 Milton Keynes Dons",
"Bristol City 0-0 Fleetwood Town",
"Everton 1-2 Leicester City",
"Huddersfiled Town 4-0 Port Vale",
"Hull City 2-0 Swansea City",
"Ipswich Town 2-2 Lincoln City",
"Millwall 3-0 Bournemouth",
"Norwich City 2-2 Southampton",
"Queens Park Rangers 1-2 Blackburn Rovers",
"Rotherham United 2-3 Oxford United",
"Stoke City 0-2 Wolverhampton Wanderers",
"Sunderland 0-0 Burnley",
"Sutton United 0-0 AFC Wimbledon",
"Watford 2-0 Burton Albion",
"West Bromwich Albion 1-2 Derby County",
"Wigan Athletic 2-0 Nottingham Forest",
"Wycombe Wanderers 2-1 Stourbridge",
"Preston North End 1-2 Arsenal"
]
}

非常感谢任何帮助。感谢。

1 个答案:

答案 0 :(得分:0)

有很多关于你的代码没有意义:

  • 为什么使用嵌套的for循环?您的内部for循环似乎迭代单个字符串中的每个单词。为什么不将整个字符串传递给text()函数而不是每次传递一个字符?
  • 为什么在内循环完成后才改变currentOffset?您正在绘制整个字符串,但只更改单个单词的偏移量。
  • 为什么要将500添加到currentOffset
  • 为什么不使用txtX变量?

您需要退后一步,重新考虑您正在做的事情。如果我是你,我会做以下事情:

  • 您需要跟踪两个变量:草图级别的txtX变量跟踪向左滚动的开始,以及跟踪偏移量的currentWordX变量相对于txtX变量的当前字符串。
  • 您只需要一个for循环。即使您的最终目标需要单独绘制每个单词,也要从单个for循环开始,该循环遍历results数组。
  • 对于results数组中的每个字符串,您绘制该字符串。它的X位置是txtX + currentWordX。然后你得到该字符串的宽度并将该值添加到currentWordX变量。
  • for循环之后,您需要减少txtX变量以使整个内容滚动到左侧。