原创

坐标是否在图形区域内-面试题


计算坐标点(x,y)是否在半径为R的半圆内

计算坐标是否在堆叠规则图形内

思路:也是分别计算多个图形,是否在某一图形内就可以

对于不规则图形

如果是不规则的,在canvas中,颜色是唯一的话,可以通过获取canvas点击下去的颜色是否和区域颜色一样
如何获取canvas点击的颜色呢?
var color = (canvas.getColor(x, y)).rgba;

代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>是否点在区域内</title>
  <style>
    body {
      transition: background ease 0.2s;
      text-align: center;
      padding: 0;
      margin: 0;
    }
    #cursor {
      width: 9px;
      height: 9px;
      position: absolute;
    }
    #cursor::before,
    #cursor::after {
      content: '';
      position: absolute;
      background-color: #000;
    }
    #cursor::before {
      left: 4px;
      top: 0;
      width: 1px;
      height: 9px;
    }
    #cursor::after {
      top: 4px;
      left: 0;
      width: 9px;
      height: 1px;
    }
  </style>
</head>
<body>
<h2>点击图片任意位置</h2>
<img id="img" src="https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/blog/images/209d0979422e4d53aad4479c77cffd4f.png" alt="" crossOrigin="anonymous">
<h3 id="output"></h3>
<script>
  window.addEventListener('load', function () {
    // 将 img 绘制在 canvas 中
    function draw (img) {
      var style = window.getComputedStyle(img);
      var width = parseInt(style.width, 10);
      var height = parseInt(style.height, 10);
      var canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      // 获取坐标颜色
      function getPixelColor (x, y) {
        var imageData = ctx.getImageData(x, y, 1, 1);
        var pixel = imageData.data;
        var r = pixel[0];
        var g = pixel[1];
        var b = pixel[2];
        var a = pixel[3] / 255;
        a = Math.round(a * 100) / 100;
        var rHex = r.toString(16);
        r < 16 && (rHex = "0" + rHex);
        var gHex = g.toString(16);
        g < 16 && (gHex = "0" + gHex);
        var bHex = b.toString(16);
        b < 16 && (bHex = "0" + bHex);
        var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
        var hexColor = "#" + rHex + gHex + bHex;
        return {
          rgba: rgbaColor,
          rgb: rgbColor,
          hex: hexColor,
          r: r,
          g: g,
          b: b,
          a: a
        };
      }
      return {
        getColor: getPixelColor,
      };
    };
    // 点击位置绘制一个十字坐标
    function setCursor (x, y) {
      // <div id="cursor" class="cursor"></div>
      var cursor = document.getElementById('cursor');
      if (!cursor) {
        cursor = document.createElement('div');
        cursor.id = 'cursor';
        document.body.appendChild(cursor);
      }
      cursor.style.left = x - 4 + 'px';
      cursor.style.top = y - 4 + 'px';
    }
    var img = document.getElementById('img');
    var output = document.getElementById('output');
    var canvas = draw(img);
    img.addEventListener('click', function (e) {
      var x = e.offsetX;
      var y = e.offsetY;
      setCursor(e.pageX, e.pageY);
      var color = (canvas.getColor(x, y)).rgba;
      if(color === "rgba(0,0,0,1)"){
        alert("在区域内")
      }
    });
  });
</script>
</body>
</html>

演示地址
https://web03-1252477692.cos.ap-guangzhou.myqcloud.com/blog/demo/%E7%82%B9%E5%9C%A8%E5%8C%BA%E5%9F%9F%E5%86%85.html

JavaScript
html
面试题
  • 作者:零三(联系作者)
  • 最后更新时间:2020-06-30 13:16
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn