Изменение цвета сегмента линии в HTML5 Canvas с плагином jQuery Colorpicker - PullRequest
Новая
       11

Изменение цвета сегмента линии в HTML5 Canvas с плагином jQuery Colorpicker

0 голосов
/ 17 ноября 2011

У меня есть холст HTML5 с несколькими отрезками.Я хочу добавить палитру цветов jQuery, чтобы позволить пользователям изменять цвет обводки этих сегментов.Как я могу получить значение из палитры цветов для применения к определенному сегменту линии?

изменить ... хорошо, я получил это далеко, но я не могу понять, как получить линию для выборановый myPicker 

<script type="text/javascript" src="jscolor.js"></script>

<script type="text/javascript">
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
</script>

<script type="application/javascript" language="javascript">
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var myStroke = "#ff0000";

    context.moveTo(100, 150);
    context.lineTo(450, 150);
    context.lineWidth = 10;
    context.strokeStyle = myStroke;
    context.stroke();
};
</script>

1 Ответ

1 голос
/ 17 ноября 2011

Не проверял, но это должно работать: 

$('#yourColorpickerField').ColorPicker({
onChange: function(hsb, hex, rgb, el) {
    var newColor = $(el).val(hex);

    var context = canvas.getContext('yourCanvasName');
    context.fillStyle = newColor;
    // here, you can draw your line again, or if you're already doing it on an interval, it should be fine for the next time you call it
}
});

Предполагается, что все ваши линии одного цвета. Я вижу, что вы хотите, чтобы это применялось только к «определенному отрезку линии», и в этом случае вам нужно будет изменить приведенный выше код. Это будет сильно зависеть от того, как выглядит ваш существующий код, но в основном вместо установки context.fillStyle на новый цвет, вы захотите сохранить новое значение цвета в другой переменной, которую вы сможете прочитать позже, когда придет время нарисовать этот конкретный отрезок (в этот момент вы установите цвет context.filleStyle непосредственно перед рисованием линии).

...