时间戳

首页 > 解决方案 > 如何专门为字符串着色文本？

javascript - 如何专门为字符串着色文本？

问题描述

我正在制作一个图像生成端点，其中GET包含有关 Minecraft 服务器用户统计信息的信息。如果这让人感到困惑，我很抱歉，但我会尽力而为。

我在这里要做的是使文本的颜色与hive.modernRank.humanJSON 对象键相对应。例如：

等等

目前，它只是黑色文本，因为我不确定如何实现这一点，因此，我开始制作端点。

代码：

   try {       
   Canvas.registerFont(resolve(join(__dirname, '../assets/RifficFree-Bold.ttf')), 'Riffic');  
   Canvas.registerFont(resolve(join(__dirname, '../assets/GothamMedium.ttf')), 'GothamMedium');

const { body: hive } = await get(`http://api.hivemc.com/v1/player/${req.query.player}`)
    const { body: template } = await get(`https://i.imgur.com/XccpQSv.png`)
    const { width, height } = await loadImage(template); 

          let canvas = new Canvas(width, height)
    .addImage(template, 0, 0, width, height)
    .setColor("#000000")
    .setTextFont(`30px Riffic`)
    .addText(hive.username, 20, 40)
    .setTextFont(`14px GothamMedium`)

    .setColor(`#`)
    .addText(hive.modernRank.human, 20, 60)
  /*  .setColor("#ffffff")
    .setTextFont(`20px GothamMedium`)*/
  /*  .addText(`
XP: ${hide.xp}
Hider Kills: ${hide.hider_kills} • Seeker Kills: ${hide.seeker_kills}
Played: ${hide.played} • Wins: ${hide.victories} • Deaths: ${hide.deaths}
W/L: ${wlratio}% • HK/D: ${hdratio} • SK/D: ${sdratio}
First Played: ${date}
`, 20, 89)*/

    .toBuffer();

    res.contentType('image/png');
    res.end(canvas)
     } catch (e) { 
    return res.send({"error": "404 Not Found", "message": "The Hive Bedrock player you tried to request was not found. Make sure the player username was spelt correct."});     
        }

截图：https ://imgur.com/a/k8VHxYF

请注意，该项目是使用 express.js 路由完成的。截图供您参考。我在这里问是因为我不想最终只为排名颜色编写 300 多行重复代码。

标签： javascriptexpresscanvas

解决方案

使用.setColor对我来说效果很好......
请参阅下面的代码我随机选择将应用于第二个文本的颜色（红色或绿色）：

const { Canvas } = require("canvas-constructor");
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  let color = "#FF0000";
  if (Math.random() > 0.5) {
    color = "#00FF00";
  }

  let canvas = new Canvas(200, 200)
    .setColor("#000000")
    .addText("Hello", 20, 40)
    .setColor(color)
    .addText("World", 20, 60);

  res.contentType("image/png");
  res.end(canvas.toBuffer());
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log("Service running PORT:" + PORT);
});

在您的情况下，if 语句将检查modernRank 的值

这是实际操作：
https ://codesandbox.io/s/bold-snow-exxdr?file=/server.js

推荐阅读