Question

我这里有一系列对象（书）。我的问题是：我如何使用＆＃34;颜色＆＃34;对象所以每本书都有它的颜色属性？我想它必须是这样的 - ＆gt;预订[金额] .color＆lt; - 但我无法使其发挥作用。

我不知道如何调用颜色属性。

这是对象数组：

var book = [

    {title: "The Giver",
    stars: 3,
    author: "Lowry Loys",
    color: color(0, 38, 255), //How do I make this property work in the code?
    image: true},

    {title: "How to win friends",
    stars: 5,
    author: "Dale Carnegie",
    color: color(214, 255, 219),
    image: false},

    {title: "Principios fund. de la filosofía",
    stars: 5,
    author: "Georges Politzer",
    color: color(115, 0, 255),
    image: false}
];

这是代码

 // draw shelf
    fill(173, 117, 33);
    rect(0, 120, width, 10);

// draw books + title + author
for (var amount = 0; amount < book.length; amount++) { //draw books
    fill(214, 255, 219);
    rect(154*amount, 20, 90, 100);
    fill(0, 0, 0);
    textSize(13);
    text(book[amount].title, 5 + 158*amount, 27, 68, 100); //draw title
    textSize(10);
    text(book[amount].author, 5 + 155*amount, 91, 75, 100); //draw author

    for (var s = 0; s < book[amount].stars; s++) { //draw stars
    image(getImage("cute/Star"), 11 + s * 15 + amount * 151, 98, 15, 22);
    }

    for (var i = 0; i < book[amount].image; i++) { //draw stars
    image(getImage("avatars/aqualine-sapling"), 9 + i * 60 + amount * 46, 42, 36, 39);
    }
}

Answer 1

假设您没有color功能，您必须引用这些属性，然后提取颜色信息。

在这个简单的例子中，正则表达式从（索引1）对象中获取颜色值，然后设置临时元素的背景颜色。

＆＃13;

var book=[{title:"The Giver",stars:3,author:"Lowry Loys",color:'color(0, 38, 255)',image:!0},{title:"How to win friends",stars:5,author:"Dale Carnegie",color:'color(214, 255, 219)',image:!1},{title:"Principios fund. de la filosofía",stars:5,author:"Georges Politzer",color:'color(115, 0, 255)',image:!1}]

const result = document.getElementById('result');
const color = book[1].color.match(/(\d+)/g);
result.style.backgroundColor = getColor(color);

function getColor(color) {
  return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
}

＆＃13;

<div id="result">sdfdsfdsf</div>

＆＃13;

Answer 2

颜色函数不存在于普通的javascript中。我认为最简单的方法是将您的颜色存储为下面的字符串中的HEX：

var book = [{
    title: "The Giver",
    stars: 3,
    author: "Lowry Loys",
    color: "#0026ff", // converted rgb(0, 38, 255)
    image: true
}];

book[0].color; // "#0026ff"

您可以使用例如this工具，用于手动将颜色转换为HEX。如果您不喜欢它，只需实现自己的color函数将rgb转换为十六进制（link）。

Here你还可以找到一个名为Qix- / color的有趣的npm包：

用于不可变颜色转换和操作的JavaScript库，支持CSS颜色字符串。

希望它有所帮助！

如何使用此颜色对象？

2 个答案: