Angular 8通过颜色选择器在鼠标悬停时获得颜色

Question

我正在尝试在 Angular 8 中构建我自己的颜色选择器。我想使用像 this 这样的色轮。
我想我可能会从鼠标悬停事件中获得有用的数据，但我不知道这是否是 goto。

<img
    (mouseover)="getColorOnMouseOver($event)"
    src="colorwheel.png"
    style="max-width: 500px; max-height: auto;"
>

我发现了一个有用的帖子 (https://stackoverflow.com/a/59401835/12282474)。 Mabye 我可以使用这里显示的东西并从我的 colorwheel.png 中获取每个像素的颜色......但是我对 Angular 真的很陌生，所以我没有成功在我的项目中重新创建解决方案。

感谢您的每一个帮助！

Answer 1

你走在正确的道路上。查看link 了解如何制作自己的色轮，查看post 了解如何使用带角度的画布。该解决方案是使用 jquery 用 js 编写的，因此您始终可以将其更新为 angular。它使用画布绘制色轮图像，然后使用 mousemove 函数（角度鼠标悬停）来获取指针的当前像素 rbg 信息。然后你可以使用点击事件来锁定你想要的颜色。

$(function(){

    // create canvas and context objects
    var canvas = document.getElementById('picker');
    var ctx = canvas.getContext('2d');

    // drawing active image
    var image = new Image();
    image.onload = function () {
        ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
    }

    // select desired colorwheel
    var imagesrc="images/colorwheel1.png";
    switch ($(canvas).attr('var')) {
        case '2':
            imagesrc="images/colorwheel2.png";
            break;
        case '3':
            imagesrc="images/colorwheel3.png";
            break;
        case '4':
            imagesrc="images/colorwheel4.png";
            break;
        case '5':
            imagesrc="images/colorwheel5.png";
            break;
    }
    image.src = imageSrc;

    $('#picker').mousemove(function(e) { // mouse move handler
        if (bCanPreview) {
            // get coordinates of current position
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);

            // get current pixel
            var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
            var pixel = imageData.data;

            // update preview color
            var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
            $('.preview').css('backgroundColor', pixelColor);

            // update controls
            $('#rVal').val(pixel[0]);
            $('#gVal').val(pixel[1]);
            $('#bVal').val(pixel[2]);
            $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);

            var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
            $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
        }
    });
});