【问题标题】:Draw text on image using graphicsmagick (node-gm) drawText使用 graphicsmagick (node-gm) drawText 在图像上绘制文本
【发布时间】:2017-08-20 09:17:12
【问题描述】:

有一些这样的数组:

var myArray=[
  { title: 'Some title', time: 'Some time'},
  ...
  ];

和node-gm代码:

gm('bg.png')
  .fill("#ffffff")
  .font("Phenomena-Bold.otf", 27)
  .drawText(225, 75, "Some text")
  .write("result.png", function (err) {
    if (!err) console.log('done');
  });

需要将 myArray 中的每个项目添加到 .drawText() 中,并将 y 轴移动到 45px。 有什么想法吗?

【问题讨论】:

    标签: node.js graphicsmagick node-gm


    【解决方案1】:

    你问过,我写过并测试过。

    采取(:

    const
      gm = require('gm');
    
    const myArray = [
      { title: 'Some title', time: 'Some time'},
      { title: 'Second title', time: 'second time'}
    ];
    
    const
      image = gm('bg.jpg')
                .fill('#ffffff')
                .font('Arial', 27) // I didn't wanted to play with fonts, so used normal default thing (:
                .drawText(225, 75, "Some text");
    
    let x = 225;
    let y = 75;
    for(const text of myArray) {
      y += 45;
      image.drawText(x, y, text.title);
    }
    image.write('result.png', err => {
      if(err) return console.error(err);
      console.log('done');
    });
    

    【讨论】:

    • 非常感谢!真正有用的解决方案!
    • 也许您知道如何在一个 drawText 函数中更改字体颜色?例如第一个单词为白色,前一个单词为红色: .drawText(10,10, 'white text and then red text')
    • @DanMishin 别偷懒,看手册:aheckmann.github.io/gm/docs.html 这叫填充,你的文字也是形状,在画东西之前你可以打电话给fill
    • 谢谢,我知道fill 以及如何使用它:.fill('#ffffff').drawText(x,y, text) .fill('#333333').drawText(x,y, text) 但我不明白如何在同一个drawText 函数中使用它。首先阅读手册,但找不到答案。
    • @DanMishin 只是调用链式:image.fill("#ff0000").drawTezt()
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-04-10
    • 1970-01-01
    • 1970-01-01
    • 2016-11-04
    • 2017-07-07
    相关资源
    最近更新 更多