перетаскивание холста и выбор цвета - PullRequest
Новая
       43

перетаскивание холста и выбор цвета

0 голосов
/ 16 сентября 2018

Итак, у меня есть селектор цвета на холсте. Цвет градиента заполняет форму. Пользователь использует свою мышь для выбора в любом месте гистограммы. Довольно стандартный. Они также могут перетаскивать мышь в любом месте фигуры. Чтобы показать их местоположение после окончательного выбора цвета, я добавил маленький fillRect черного цвета, который перемещается вместе с их мышью. Теперь вот моя проблема, так как они иногда перемещают мышь, функция getImageData захватывает цвет маленького черного прямоугольника, а не нижележащий градиент. Чтобы решить эту проблему, я сместил точку на 5 пикселей от точки, где мышь касается градиента. Это сработало. Однако теперь, когда они перетаскивают мышь к точному краю фигуры, она рисует эту черную точку за пределами границ и выглядит плохо. Как я могу предотвратить это, в то же время не давая моей мыши подхватить черный квадрат?

enter image description here

$colors.on('touchmove mousemove', function (e) {
    e.preventDefault();
    let gradient = Ybigh.colorctx.createRadialGradient(135, 330, 160, 200, 290, 30);

    gradient.addColorStop(0,    "#84342f");
    gradient.addColorStop(0.25, "#ff5f57");
    gradient.addColorStop(1,  "white");

    colorctx.beginPath();
    colorctx.moveTo(20, 185);
    colorctx.lineTo(200, 285);
    colorctx.lineTo(200, 295);
    colorctx.lineTo(20, 400);
    colorctx.closePath();
    colorctx.fillStyle = gradient;
    colorctx.strokeStyle = "#b0aaa6"; 
    colorctx.stroke();
    colorctx.fill();
    colorctx.fillStyle = "#000000";  
    colorctx.fillRect(new_color.x-2, new_color.y-2, 2, 2);
});

1 Ответ

0 голосов
/ 16 сентября 2018

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

$("body").mouseup(function () {

            glob.hasclicked=false;
            colorctx.fillStyle = "#000000";  
            colorctx.fillRect(glob.rectPosition.x, glob.rectPosition.y, 3, 3);


        });
...