采用对象数组的函数拒绝自制数组

Question

我有一个名为bubbels.js的文件，在这个文件中有一些函数可以为指定的字符串生成气泡效果。

现在我有一个颜色选择器，因此用户可以选择颜色，然后生成名称的函数应该以用户指定的颜色生成名称。

经过大量测试后，我发现生成函数需要几个rgb代码来表示颜色。所以我做了一个hex到rgb转换器，所以我会得到用户选择的rgb代码。我已将rgb放入var中，并希望在生成函数中将其用作颜色。但是rgb是一个字符串，所以我把它解析成一个整数数组，就像我最初做的那样。

现在问题： 生成名称的函数有效但由于某种原因没有采用用户指定的颜色，我无法弄清楚它为什么不采用用户颜色。

这就是我构建rgb数组的方式：

var colorPicker_Veld1 = "#" + document.getElementById("kleur1").value;
var colorPicker_Veld2 = "#" + document.getElementById("kleur2").value;
var colorPicker_Veld3 = "#" + document.getElementById("kleur3").value;
var colorPicker_Veld4 = "#" + document.getElementById("kleur4").value;
var colorPicker_Veld5 = "#" + document.getElementById("kleur5").value;

var red_r = hexToRgb(colorPicker_Veld1).r;
var red_g = hexToRgb(colorPicker_Veld1).g;
var red_b = hexToRgb(colorPicker_Veld1).b;

var parsedRed_r = parseInt(red_r);
var parsedRed_g = parseInt(red_g);
var parsedRed_b = parseInt(red_b);

var red = [parsedRed_r, parsedRed_g, parsedRed_b]; 

var orange_r = hexToRgb(colorPicker_Veld2).r;
var orange_g = hexToRgb(colorPicker_Veld2).g;
var orange_b = hexToRgb(colorPicker_Veld2).b;

var parsedOrange_r = parseInt(orange_r);
var parsedOrange_g = parseInt(orange_g);
var parsedOrange_b = parseInt(orange_b);

var orange = [parsedOrange_r, orange_g, orange_b];

我用各种颜色做这个，然后我做一个var lettercolor，看起来像这样：

var letterColors = [red, orange, green, blue, purple];

我给函数drawName的字母颜色和名称（来自文本框），如下所示：

drawName(myName, letterColors);

可以在bubble.js文件中找到drawName()函数，如下所示：

    function Vector(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;

    this.set = function (x, y) {
        this.x = x;
        this.y = y;
    };
}

function PointCollection() {
    this.mousePos = new Vector(0, 0);
    this.pointCollectionX = 0;
    this.pointCollectionY = 0;
    this.points = [];

    this.update = function () {
        for (var i = 0; i < this.points.length; i++) {
            var point = this.points[i];

            var dx = this.mousePos.x - point.curPos.x;
            var dy = this.mousePos.y - point.curPos.y;
            var dd = (dx * dx) + (dy * dy);
            var d = Math.sqrt(dd);

            point.targetPos.x = d < 150 ? point.curPos.x - dx : point.originalPos.x;
            point.targetPos.y = d < 150 ? point.curPos.y - dy : point.originalPos.y;

            point.update();
        }
    };

    this.shake = function () {
        var randomNum = Math.floor(Math.random() * 5) - 2;

        for (var i = 0; i < this.points.length; i++) {
            var point = this.points[i];
            var dx = this.mousePos.x - point.curPos.x;
            var dy = this.mousePos.y - point.curPos.y;
            var dd = (dx * dx) + (dy * dy);
            var d = Math.sqrt(dd);
            if (d < 50) {
                this.pointCollectionX = Math.floor(Math.random() * 5) - 2;
                this.pointCollectionY = Math.floor(Math.random() * 5) - 2;
            }
            point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY);
        }
    };

    this.draw = function (bubbleShape, reset) {
        for (var i = 0; i < this.points.length; i++) {
            var point = this.points[i];

            if (point === null)
                continue;

            if (window.reset) {
                this.pointCollectionX = 0;
                this.pointCollectionY = 0;
                this.mousePos = new Vector(0, 0);
            }

            point.draw(bubbleShape, this.pointCollectionX, this.pointCollectionY, reset);
        }
    };

    this.reset = function (bubbleShape) {};
}

function Point(x, y, z, size, color) {
    this.curPos = new Vector(x, y, z);
    this.color = color;

    this.friction = document.Friction;
    this.rotationForce = document.rotationForce;
    this.springStrength = 0.1;

    this.originalPos = new Vector(x, y, z);
    this.radius = size;
    this.size = size;
    this.targetPos = new Vector(x, y, z);
    this.velocity = new Vector(0.0, 0.0, 0.0);

    this.update = function () {
        var dx = this.targetPos.x - this.curPos.x;
        var dy = this.targetPos.y - this.curPos.y;
        // Orthogonal vector is [-dy,dx]
        var ax = dx * this.springStrength - this.rotationForce * dy;
        var ay = dy * this.springStrength + this.rotationForce * dx;

        this.velocity.x += ax;
        this.velocity.x *= this.friction;
        this.curPos.x += this.velocity.x;

        this.velocity.y += ay;
        this.velocity.y *= this.friction;
        this.curPos.y += this.velocity.y;

        var dox = this.originalPos.x - this.curPos.x;
        var doy = this.originalPos.y - this.curPos.y;
        var dd = (dox * dox) + (doy * doy);
        var d = Math.sqrt(dd);

        this.targetPos.z = d / 100 + 1;
        var dz = this.targetPos.z - this.curPos.z;
        var az = dz * this.springStrength;
        this.velocity.z += az;
        this.velocity.z *= this.friction;
        this.curPos.z += this.velocity.z;

        this.radius = this.size * this.curPos.z;
        if (this.radius < 1) this.radius = 1;
    };

    /*this.draw = function (bubbleShape, dx, dy) {
        ctx.fillStyle = this.color;
        if (bubbleShape == "square") {
            ctx.beginPath();
            ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);

        } else {
            ctx.beginPath();
            ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
            ctx.fill();
        }
    };*/
    this.draw = function (bubbleShape, dx, dy) {
    ctx.fillStyle = this.color;
    if (bubbleShape == "square") {
        ctx.beginPath();
        ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);
    } else if (bubbleShape == "triangle") {

        // driehoek
        // start our path
ctx.beginPath();
// move to vertex A
ctx.moveTo(this.curPos.x + dx, this.curPos.y + dy);
// move to vertex B
ctx.lineTo(this.curPos.x + dx, this.curPos.y + dy + this.radius * 1.5);
// move to vertex C
ctx.lineTo(this.curPos.x + dx + this.radius * 1.5, this.curPos.y + dy + this.radius * 1.5);
// fill our shape
ctx.fill();
    }
    else if (bubbleShape == "heart") {
  ctx.beginPath();
  ctx.moveTo(this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.462 * this.radius);
  ctx.bezierCurveTo(this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.4275 * this.radius, this.curPos.x + dx + 0.807 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 0.5775 * this.radius, this.curPos.y + dy + 0.288 * this.radius);
  ctx.bezierCurveTo(this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.721 * this.radius, this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.721 * this.radius);
  ctx.bezierCurveTo(this.curPos.x + dx + 0.231 * this.radius, this.curPos.y + dy + 0.923 * this.radius, this.curPos.x + dx + 0.462 * this.radius, this.curPos.y + dy + 1.177 * this.radius, this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 1.385 * this.radius);
  ctx.bezierCurveTo(this.curPos.x + dx + 1.269 * this.radius, this.curPos.y + dy + 1.177 * this.radius, this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.923 * this.radius, this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.721 * this.radius);
  ctx.bezierCurveTo(this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.721 * this.radius, this.curPos.x + dx + 1.5 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 1.154 * this.radius, this.curPos.y + dy + 0.288 * this.radius);
  ctx.bezierCurveTo(this.curPos.x + dx + 0.9808 * this.radius, this.curPos.y + dy + 0.288 * this.radius, this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.4275 * this.radius, this.curPos.x + dx + 0.8655 * this.radius, this.curPos.y + dy + 0.462 * this.radius);
  ctx.fill();
}   
else if (bubbleShape=="target") {
            ctx.beginPath();
            for (var i=5;i>0;i--) {
                ctx.arc(this.curPos.x + dx, this.curPos.y + dy, i*this.radius/5, 0, Math.PI * 2, i%2===0);
            }
            ctx.fill();
        } else if (bubbleShape=="smiley") {
            ctx.beginPath();
            ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, false);
            ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*4, Math.PI, 0, true);
           ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius/5*3, Math.PI, 0, true);
            ctx.arc(this.curPos.x+dx-(this.radius/3),this.curPos.y+dy-(this.radius/2),this.radius/6,0,Math.PI*2,true);
            ctx.moveTo(this.curPos.x+dx+(this.radius/3),this.curPos.y+dy-(this.radius/2));
            ctx.arc(this.curPos.x+dx+(this.radius/3),this.curPos.y+dy-(this.radius/2),this.radius/6,0,Math.PI*2,true);

            ctx.fill();
        }else if (bubbleShape=="4star") {
        ctx.beginPath();
        for (var ixVertex=0;ixVertex<=8;++ixVertex) {
        var angle = ixVertex * Math.PI / 4 - Math.PI / 4;
            var radius = ixVertex % 2 === 0 ? this.radius: this.radius/3;
            ctx.lineTo(this.curPos.x + dx+ radius * Math.cos(angle), this.curPos.y + dy + radius * Math.sin(angle));
        }
          ctx.fill(); 
        }
        else if (bubbleShape=="5star") {
        ctx.beginPath();
        for (var ixVertex=0;ixVertex<=10;ixVertex++) {
        var angle = ixVertex * Math.PI /5 - Math.PI/2;
            var radius = ixVertex % 2 === 0 ? this.radius: this.radius/3;
            ctx.lineTo(this.curPos.x + dx+ radius * Math.cos(angle), this.curPos.y + dy + radius * Math.sin(angle));
        }
          ctx.fill(); 
        }
        else if (bubbleShape=="pentagon") {
        ctx.beginPath();
        for (var ixVertex=0;ixVertex<=8;++ixVertex) {
        var angle = ixVertex * 2*Math.PI / 8- Math.PI / 2;
            //var radius = ixVertex % 2 === 0 ? this.radius: this.radius/3;
            ctx.lineTo(this.curPos.x + dx+ this.radius * Math.cos(angle), this.curPos.y + dy + this.radius * Math.sin(angle));
        }
          ctx.fill(); 
        }
     else {
        ctx.beginPath();
        ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
        ctx.fill();
    }
};

}

function makeColor(hslList, fade) {
    var hue = hslList[0] /*- 17.0 * fade / 1000.0*/ ;
    var sat = hslList[1] /*+ 81.0 * fade / 1000.0*/ ;
    var lgt = hslList[2] /*+ 58.0 * fade / 1000.0*/ ;
    return "hsl(" + hue + "," + sat + "%," + lgt + "%)";
}

function phraseToHex(phrase) {
    var hexphrase = "";
    for (var i = 0; i < phrase.length; i++) {
        hexphrase += phrase.charCodeAt(i).toString(16);
    }
    return hexphrase;
}

function initEventListeners() {
    $(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove);

    canvas.ontouchmove = function (e) {
        e.preventDefault();
        onTouchMove(e);
    };

    canvas.ontouchstart = function (e) {
        e.preventDefault();
    };
}

function updateCanvasDimensions() {
    canvas.attr({
        height: 500,
        width: 1000
    });
    canvasWidth = canvas.width();
    canvasHeight = canvas.height();
    draw();
}

function onMove(e) {
    if (pointCollection) {
        pointCollection.mousePos.set(e.pageX - canvas.offset().left, e.pageY - canvas.offset().top);
    }
}

function onTouchMove(e) {
    if (pointCollection) {
        pointCollection.mousePos.set(e.targetTouches[0].pageX - canvas.offset().left, e.targetTouches[0].pageY - canvas.offset().top);
    }
}

function bounceName() {
    shake();
    setTimeout(bounceName, 30);
}

function bounceBubbles() {
    draw();
    update();
    setTimeout(bounceBubbles, 30);
}

function draw(reset) {
    var tmpCanvas = canvas.get(0);

    if (tmpCanvas.getContext === null) {
        return;
    }

    ctx = tmpCanvas.getContext('2d');
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    bubbleShape = typeof bubbleShape !== 'undefined' ? bubbleShape : "circle";

    if (pointCollection) {
        pointCollection.draw(bubbleShape, reset);
    }
}

function shake() {
    var tmpCanvas = canvas.get(0);

    if (tmpCanvas.getContext === null) {
        return;
    }

    ctx = tmpCanvas.getContext('2d');
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    bubbleShape = typeof bubbleShape !== 'undefined' ? bubbleShape : "circle";

    if (pointCollection) {
        pointCollection.shake(bubbleShape);
    }
}

function update() {
    if (pointCollection)
        pointCollection.update();
}

function drawName(name, letterColors) {
    updateCanvasDimensions();
    var g = [];
    var offset = 0;

    function addLetter(cc_hex, ix, letterCols) {
        if (typeof letterCols !== 'undefined') {
            if (Object.prototype.toString.call(letterCols) === '[object Array]' && Object.prototype.toString.call(letterCols[0]) === '[object Array]') {
                letterColors = letterCols;
            }
            if (Object.prototype.toString.call(letterCols) === '[object Array]' && typeof letterCols[0] === "number") {
                letterColors = [letterCols];
            }
        } else {
            // if undefined set black
            letterColors = [[0, 0, 27]];
        }

        if (document.alphabet.hasOwnProperty(cc_hex)) {
            var chr_data = document.alphabet[cc_hex].P;
            var bc = letterColors[ix % letterColors.length];

            for (var i = 0; i < chr_data.length; ++i) {
                point = chr_data[i];

                g.push(new Point(point[0] + offset,
                    point[1],
                    0.0,
                    point[2],
                    makeColor(bc, point[3])));
            }
            offset += document.alphabet[cc_hex].W;
        }
    }

    var hexphrase = phraseToHex(name);

    var col_ix = -1;
    for (var i = 0; i < hexphrase.length; i += 2) {
        var cc_hex = "A" + hexphrase.charAt(i) + hexphrase.charAt(i + 1);
        if (cc_hex != "A20") {
            col_ix++;
        }
        addLetter(cc_hex, col_ix, letterColors);
    }

    for (var j = 0; j < g.length; j++) {
        g[j].curPos.x = (canvasWidth / 2 - offset / 2) + g[j].curPos.x;
        g[j].curPos.y = (canvasHeight / 2 - 105) + g[j].curPos.y;
        g[j].originalPos.x = (canvasWidth / 2 - offset / 2) + g[j].originalPos.x;
        g[j].originalPos.y = (canvasHeight / 2 - 105) + g[j].originalPos.y;
    }

    pointCollection = new PointCollection();
    pointCollection.points = g;
    initEventListeners();
}

window.reset = false;

$(window).mouseleave(function () {
    window.reset = true;
});

$(window).mouseenter(function () {
    window.reset = false;
});

var canvas = $("#myCanvas");
var canvasHeight;
var canvasWidth;
var ctx;
var pointCollection;

document.rotationForce = 0.0;
document.Friction = 0.85;

var white = [0, 0, 100];
var black = [0, 0, 27];
var red = [0, 100, 63];//var orange = [parsedOrange_r, orange_g, orange_b];
var orange = [40, 100, 60];//var orange = [parsedOrange_r, orange_g, orange_b];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

setTimeout(updateCanvasDimensions, 30);

有人可以向我解释为什么drawName函数不想使用用户指定的颜色。

“工作”示例可在以下位置找到： http://amandovledder.eu/bubbel

Answer 1

错误是颜色字符串格式之一。 bubbels.js中的函数makeColor返回形式为hsl(hue, sat%, lum%)的色调饱和度亮度字符串，以用作颜色值。但是，调用代码为它提供了一个RGB值数组。可以通过修改makeColor来返回表示调用它的数组的rgb字符串来生成代码（如同强制执行）：

function makeColor(rgb)
{
    return "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
}