احصل على Pixel Color من Canvas على Mousemove

نظرة عامة

يستكشف هذا المنشور كيف يمكنك استرداد قيم RGB للبكسل الموجود أسفل مؤشر الماوس أثناء التحرك فوق عنصر قماش. سنقدم منهجًا شاملاً بمثال قائم بذاته.

الحل

لتحقيق ذلك، قم أولاً بإنشاء لوحة قماشية بالأبعاد المطلوبة:

املأ اللوحة القماشية بعناصر مثل المربعات:

const example = document.getElementById('example');
const ctx = example.getContext('2d');

ctx.fillStyle = randomColor();
ctx.fillRect(0, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(55, 0, 50, 50);

ctx.fillStyle = randomColor();
ctx.fillRect(110, 0, 50, 50);

أخيرًا، أضف معالج حدث mousemove الذي يلتقط قيم البكسل في موضع المؤشر:

$('#example').mousemove(function(e) {
  // Calculate the position relative to the canvas
  const pos = findPos(this);
  const x = e.pageX - pos.x;
  const y = e.pageY - pos.y;
  const coord = `x=${x}, y=${y}`;

  // Get the pixel value
  const c = this.getContext('2d');
  const p = c.getImageData(x, y, 1, 1).data;

  // Convert to hex format
  const hex = "#"   ("000000"   rgbToHex(p[0], p[1], p[2])).slice(-6);

  // Display the color information
  $('#status').html(coord   "
"   hex);
});

وظائف الأداة المساعدة

يعتمد هذا الرمز على الوظائف الداعمة للعثور على موضع العنصر وتحويل قيم RGB إلى ست عشرية. حدد هذه الوظائف على النحو التالي:

function findPos(obj) {
  let curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft  = obj.offsetLeft;
      curtop  = obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255) throw "Invalid color component";

  return ((r << 16) | (g << 8) | b).toString(16);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
  return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`;
}

مثال حي

تفضل بزيارة الرابط التالي لرؤية المثال الكامل عمليًا:

https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203