自定义选择使用js.color不工作 [英] custom pick using js.color not working

问题描述

您好，我试图使用javascript库js.color选择自定义颜色，但它不是在颜色代码中画线。
它选择颜色，但不绘制具有相同的线。

Hi I 'm trying to pick a custom color using javascript library js.color but it is not picking up color to draw lines in the code. It is selecting the color but not drawing the lines with the same.

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isDown = false;
var startY;

var layers = [];
var currentColor = "black";

function handleMouseDown(e) {
    e.preventDefault();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    currentColor = randomColor();
    isDown = true;
}

function handleMouseUp(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isDown = false;
    layers.push({
        y1: startY,
        y2: mouseY,
        color: currentColor
    });
}

function handleMouseOut(e) {
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isDown = false;
    layers.push({
        y1: startY,
        y2: mouseY,
        color: currentColor
    });
}

function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    drawAll();
    hLine(startY, currentColor);
    hLine(mouseY, currentColor);
}

function drawAll() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < layers.length; i++) {
        layer = layers[i];
        hLine(layer.y1, layer.color);
        hLine(layer.y2, layer.color);
    }
}

function hLine(y, color) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.strokeStyle = color;
    ctx.stroke();
}

function randomColor() {

    return document.getElementById("txtColor").value;

}


$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});

工作小提琴 http://jsfiddle.net/UfuDX/7/ 。

推荐答案

它似乎在chrome工作很好。 Firefox然而不喜欢的颜色值。将＃添加到开头似乎工作，这是有意义的，因为它们是十六进制值。

It seems to work in chrome just fine. Firefox however didn't like the color value. Adding the # to the beginning seems to work, which makes sense since they are hex values.

code> randcomColor（）到以下。

Change your randcomColor() to the below.

function randomColor() {
    return '#'+document.getElementById("txtColor").value;

}

这篇关于自定义选择使用js.color不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！