【本身給本身題目作】之一：橢圓可點擊區域

時間 2019-11-06

標籤本身給本身題目作之一橢圓點擊區域简体版

原文原文鏈接

【題一】
請實現如下需求，要作一個活動頁面，頁面上有一張圖片（假設是800x600），圖片正中心有一個橢圓形的可點擊區域，假設橢圓長軸爲200px（橫向），短軸160px（縱向），請實現點擊這個橢圓區域彈出「我被點擊了」的字樣，而其餘區域點擊無效。（不必定要兼容低端瀏覽器，能兼容固然更好）html

我說這是我曾經出過的一道筆試題。其實主要考察點是基本的數學能力和用web前端相關知識實現需求的綜合能力。難度不算太大。用普通的dom或者canvas來實現都ok，由於其實重要思路是一致的。橢圓區域仍是要本身判斷。前端

先看demo後講思路：git

demo: http://hongru.github.io/quiz/1/index.htmlgithub

考點主要是如下幾個：web

1. 經常使用dom操做和簡單事件機制（用類庫好比jq也算）
2. 簡單數學知識（橢圓公式，座標是否在橢圓區域的判斷）
3. 數學模型到編程實踐的簡單轉換編程

代碼不復雜：canvas

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body{
    font-family:Microsoft Yahei;
}
.doc {
    width: 804px;
    margin: 0 auto;
}
#cont {
    border: 2px solid #999;
    height: 600px;
    position: relative;
}
.dot {
    position: absolute;
    width:1px;
    height: 1px;
    overflow: hidden;
    font-size:0;
    line-height: 0;
    background: #333;
}
</style>
</head>

<body>
    <div class="doc">
    <h4>【題一】</h4>
    <p>
請實現如下需求，要作一個活動頁面，頁面上有一張圖片（假設是800x600），圖片正中心有一個橢圓形的可點擊區域，假設橢圓長軸爲200px（橫向），短軸160px（縱向），請實現點擊這個橢圓區域彈出「我被點擊了」的字樣，而其餘區域點擊無效。（不必定要兼容低端瀏覽器，能兼容固然更好）</p>

        <div id="cont"></div>
    </div>
    
    <script>
        ;(function () {
            var win = window,
                doc = document,
                OFFSET;
                
            function _bind (el, ev, fn) {
                return el.addEventListener ? el.addEventListener(ev, fn, false) : el.attachEvent('on'+ev, function () { fn.call(el); });
            }
            function _$ (id) {
                return doc.getElementById(id) || id;
            }                               
            
            function _drawElipse (id, a, b) {
                var el = _$(id);
                var docfrag = doc.createDocumentFragment();
                for (var i = 0; i < 360; i ++) {
                    var dot = doc.createElement('div');
                    dot.className = 'dot';
                    
                    var l = a*Math.sin(i) + (el.offsetWidth - 4)/2,
                        t = b*Math.cos(i) + (el.offsetHeight - 4)/2;
                    
                    dot.style.left = l + 'px';
                    dot.style.top = t + 'px';
                    
                    docfrag.appendChild(dot);
                }
                el.appendChild(docfrag);
            }
            
            function offset (el) {
                 var width = el.offsetWidth,
                    height = el.offsetHeight,
                    top = el.offsetTop,
                    left = el.offsetLeft;
                while (el = el.offsetParent) {
                    top = top + el.offsetTop;
                    left = left + el.offsetLeft;
                }

                return {
                    top: top,
                    left: left,
                    height: height,
                    width: width
                }
            }
            
            function clickCheck (e) {
                e = e || win.event;
                var tar = e.target || e.srcElement,
                    x = e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft - OFFSET.left - (tar.offsetWidth/2),
                    y = e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop - OFFSET.top - (tar.offsetHeight/2);
                
                var r = Math.pow((x/100), 2) + Math.pow((y/80), 2);
                console && console.log(x, y, r);
                if (r < 1) {
                    alert('橢圓被點擊了！');
                }
            }
            
            function __init() {
                _drawElipse('cont', 100, 80);
                
                var el = _$('cont');
                OFFSET = offset(el);
                _bind(el, 'click', clickCheck);
            }
            __init();
        })();
    </script>
</body>
</html>

View Code

其實重要的代碼就是如下一段：瀏覽器

 1         function clickCheck (e) {
 2                 e = e || win.event;
 3                 var tar = e.target || e.srcElement,
 4                     x = e.clientX + doc.body.scrollLeft + doc.documentElement.scrollLeft - OFFSET.left - (tar.offsetWidth/2),
 5                     y = e.clientY + doc.body.scrollTop + doc.documentElement.scrollTop - OFFSET.top - (tar.offsetHeight/2);
 6                 
 7                 var r = Math.pow((x/100), 2) + Math.pow((y/80), 2);
 8                 console && console.log(x, y, r);
 9                 if (r < 1) {
10                     alert('橢圓被點擊了！');
11                 }
12             }