bozzysadmb
/
ISCS_Ui_Admin_Base


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced Button Selection</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<canvas id="buttonCanvas" width="480" height="360"></canvas>

<script>
  const canvas = document.getElementById('buttonCanvas');
  const ctx = canvas.getContext('2d');

  const buttonWidth = 100;
  const buttonHeight = 100;
  const padding = 10;

  const rows = 3;
  const cols = 4;

  const images = [
    'https://via.placeholder.com/100/FF0000/FFFFFF?text=Red',
    'https://via.placeholder.com/100/0000FF/FFFFFF?text=Blue',
    'https://via.placeholder.com/100/00FF00/FFFFFF?text=Green',
    'https://via.placeholder.com/100/FFFFFF/000000?text=White',
    'https://via.placeholder.com/100/FFAA00/FFFFFF?text=Orange',
    'https://via.placeholder.com/100/AAAAAA/FFFFFF?text=Gray',
    'https://via.placeholder.com/100/FF00FF/FFFFFF?text=Magenta',
    'https://via.placeholder.com/100/00FFFF/FFFFFF?text=Cyan',
    'https://via.placeholder.com/100/FFFF00/FFFFFF?text=Yellow',
    'https://via.placeholder.com/100/000000/FFFFFF?text=Black',
    'https://via.placeholder.com/100/FF7777/FFFFFF?text=Pink',
    'https://via.placeholder.com/100/7777FF/FFFFFF?text=Purple',
  ];

  let buttons = [];
  let selectedButtons = new Set();

  function loadImages(imageUrls, callback) {
    const loadedImages = [];
    let imagesToLoad = imageUrls.length;

    imageUrls.forEach((url, index) => {
      const img = new Image();
      img.src = url;
      img.onload = () => {
        loadedImages[index] = img;
        imagesToLoad--;
        if (imagesToLoad === 0) callback(loadedImages);
      };
    });
  }

  function createButtons(images) {
    let x, y;
    for (let row = 0; row < rows; row++) {
      for (let col = 0; col < cols; col++) {
        const index = row * cols + col;
        x = col * (buttonWidth + padding);
        y = row * (buttonHeight + padding);
        buttons.push({ x, y, width: buttonWidth, height: buttonHeight, image: images[index], id: index });
      }
    }
  }

  function drawButtons() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    buttons.forEach(button => {
      // 绘制按钮图片
      ctx.drawImage(button.image, button.x, button.y, button.width, button.height);

      if (selectedButtons.has(button.id)) {
        // 绘制半透明灰色遮罩
        ctx.fillStyle = 'rgba(50, 50, 50, 0.5)';
        ctx.fillRect(button.x, button.y, button.width, button.height);

        // 绘制白色对勾图标
        ctx.fillStyle = 'white';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('✔', button.x + button.width / 2, button.y + button.height / 2);

        // 添加边框
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 5;
        ctx.strokeRect(button.x, button.y, button.width, button.height);
      }
    });
  }

  function handleCanvasClick(event) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    buttons.forEach(button => {
      if (
        mouseX >= button.x &&
        mouseX <= button.x + button.width &&
        mouseY >= button.y &&
        mouseY <= button.y + button.height
      ) {
        if (selectedButtons.has(button.id)) {
          selectedButtons.delete(button.id); // 取消选中
        } else {
          selectedButtons.add(button.id); // 选中按钮
        }
        drawButtons();
      }
    });
  }

  canvas.addEventListener('click', handleCanvasClick);

  loadImages(images, loadedImages => {
    createButtons(loadedImages);
    drawButtons();
  });
</script>
</body>
</html>