Angular 8 通过颜色选择器在鼠标悬停时获取颜色
Angular 8 getting color on mouseover via color picker
我正在尝试在 Angular 8 中构建我自己的颜色选择器。我想使用像 this 这样的色轮。
我想我可能会从鼠标悬停事件中获得有用的数据,但我不知道这是否是 goto。
<img
(mouseover)="getColorOnMouseOver($event)"
src="colorwheel.png"
style="max-width: 500px; max-height: auto;"
>
我找到了一个有用的 post ()。 Mabye 我可以使用这里显示的东西并从我的 colorwheel.png 中获取每个像素的颜色......但我对 Angular 真的很陌生所以我在我的项目中重新创建解决方案没有成功。
感谢您的帮助!
你走在正确的道路上。查看此 link out on how to make your own color wheel and this ,了解如何将 canvas 与 angular 一起使用。该解决方案是使用 jquery 在 js 中编写的,因此您可以随时将其更新为 angular。它使用 canvas 绘制色轮图像,然后使用 mousemove 函数(angular 中的鼠标悬停)获取指针的当前像素 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));
}
});
});
我正在尝试在 Angular 8 中构建我自己的颜色选择器。我想使用像 this 这样的色轮。
我想我可能会从鼠标悬停事件中获得有用的数据,但我不知道这是否是 goto。
<img
(mouseover)="getColorOnMouseOver($event)"
src="colorwheel.png"
style="max-width: 500px; max-height: auto;"
>
我找到了一个有用的 post ()。 Mabye 我可以使用这里显示的东西并从我的 colorwheel.png 中获取每个像素的颜色......但我对 Angular 真的很陌生所以我在我的项目中重新创建解决方案没有成功。
感谢您的帮助!
你走在正确的道路上。查看此 link out on how to make your own color wheel and this
$(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));
}
});
});