Увеличить беспорядок Canvas Area Click - PullRequest
Новая
       2

Увеличить беспорядок Canvas Area Click

0 голосов
/ 03 октября 2018

Упрощенная версия моей страницы воспроизведена ниже.Нажав на кружок, в демонстрационном примере ниже, вы должны распечатать название кружка, щелкнувшего в элементе div.У меня 2 вопроса.1) Когда я увеличиваю страницу (кажется, что Chrome делает это автоматически на моей странице, когда она загружена, поэтому мне в настоящее время приходится уменьшать масштаб, чтобы активировать интерактивную область при использовании браузера Chrome), обнаружение щелчков по пикселям нетдольше работает.Я определяю, происходит ли щелчок внутри одного из трех кругов, проверяя расстояние (в пикселях) от центра круга.Вы можете попробовать увеличить масштаб и посмотреть, дает ли ожидаемый результат щелчок по кружкам.

2) Текст справа от кружков иногда не отображается, и я должен вручную обновить страницу один раз (после неезагружается в первый раз), чтобы текст отображался рядом с кружками.

Код, определяющий щелчок, находится внизу раздела скрипта.Я рекомендую просмотреть страницу ниже на полной странице. 

var total_vap_count = 12;
var total_sta_count = 3;


//ac
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175,50,30,0,2*Math.PI);
ctx.fillStyle = "#004379";
ctx.font = "14px Lato";
if ("1" < 2){
    ctx.fillText("1" + " AC", 211, 50);
} else {
    ctx.fillText("2" + " ACs", 211, 50);
}
ctx.fill();




//sta
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175,300,30,0,2*Math.PI);
ctx.fillStyle = "#004379";
ctx.font = "14px Lato";
if (total_sta_count < 2){
    ctx.fillText("" + total_sta_count + " device", 211, 300);
} else {
    ctx.fillText("" + total_sta_count + " devices", 211, 300);
}
ctx.fillText("connected", 211, 315);
ctx.fill();

//ssid
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50,175,30,0,2*Math.PI);
ctx.fillStyle = "#004379";
ctx.font = "14px Lato";
if (total_vap_count < 2){
    ctx.fillText("" + total_vap_count + " SSID", 86, 175);
} else {
    ctx.fillText("" + total_vap_count + " SSIDs", 86, 175);
}
ctx.fill();




// ssid status
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50 + Math.sin(Math.PI/4) * 30,175-Math.cos(Math.PI/4) * 30,8,0,2*Math.PI);
if (total_vap_count){
    ctx.fillStyle = "#4caf50";
} else {
    ctx.fillStyle = "#ff0000";
}
ctx.fill();

// sta status
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175 + Math.sin(Math.PI/4) * 30,300 - Math.cos(Math.PI/4) * 30,8,0,2*Math.PI);
if (total_sta_count){
    ctx.fillStyle = "#4caf50";
} else {
    ctx.fillStyle = "#ff0000";
}
ctx.fill();

// ac status
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175 + Math.sin(Math.PI/4) * 30,50 - Math.cos(Math.PI/4) * 30,8,0,2*Math.PI);
if (parseInt("1") > 0){
    ctx.fillStyle = "#4caf50";
} else {
    ctx.fillStyle = "#ff0000";
}
//ctx.fillStyle = "#e9ebee";
ctx.fill();

// Lines.
if (parseInt("1") > 0){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50 + Math.sin(Math.PI/4) * 30+10,175-Math.cos(Math.PI/4) * 30-10);
    ctx.lineTo(175 - Math.sin(Math.PI/4) * 30-5,50 + Math.cos(Math.PI/4) * 30+5);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#004379"
    ctx.stroke();
}

if (total_vap_count && total_sta_count){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50 + Math.sin(Math.PI/4) * 30+5,175+Math.cos(Math.PI/4) * 30+ 5);
    ctx.lineTo(175 - Math.sin(Math.PI/4) * 30-5,300 - Math.cos(Math.PI/4) * 30-5);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#004379"
    ctx.stroke();
}






$(document).ready(function() {

 var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    
    var paint1 = setTimeout(()=>{
        ctx.font="16px FontAwesome";
        ctx.fillStyle = "white";
        ctx.fillText('\uf0ac',170, 55);
    },2000);

    
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    
    var paint2 = setTimeout(()=>{
        ctx.font="16px FontAwesome";
        ctx.fillStyle = "white";
        ctx.fillText('\uf10b',170, 305);
    },2000);

 
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    
    var paint3 = setTimeout(()=>{
        ctx.font="16px FontAwesome";
        ctx.fillStyle = "white";
        ctx.fillText('\uf012',45, 180);
    },2000);


    $('#myCanvas').click(function(e){
        var x = e.clientX;
        var y = e.clientY;
        console.log("inside click");
        console.log(x);
        console.log(y);
        //x start: 5, y start: 213 for canvas
        if (Math.pow(x-55, 2) + Math.pow(y-175-213, 2) < Math.pow(30, 2)){
            //$j("#overview_page").hide();
            //openNav();
            $("#demo").empty().append("ssid clicked");
            
        }

        if (Math.pow(x-175, 2) + Math.pow(y-300-213, 2) < Math.pow(30, 2)){
            //$j("#overview_page").hide();
            //openNav_sta();
            $("#demo").empty().append("sta clicked");
            
        }

        if (Math.pow(x-175, 2) + Math.pow(y-50-213, 2) < Math.pow(30, 2)){
            //$j("#overview_page").hide();
            //openNav_ac();
            $("#demo").empty().append("ac clicked");
        }


    });

})
#left_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 330px;
    background-color: #e9ebee;
    position: fixed;
    height: 100%;
    overflow: auto;
    border: 1px solid #e9ebee;
    border-radius: 6px;
    font-family: 'Lato', Helvetica, sans-serif;
    font-size: 18px;
}

li a {
    display: block;
    color: #000;
    padding: 8px 18px;
    text-decoration: none;
}

li a.active {
    background-color: #008b10;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>


<ul id="left_menu">
        <li><div><a id="tab_wireless" href="#"><i class="fas fa-chart-line"></i>&nbsp;&nbsp;System Status</a></div></li>
        <li><div><a id="tab_system" href="#"><i class="fa fa-laptop" aria-hidden="true"></i>&nbsp;Network Configuration</a></div></li>

  <li><div><a id="radio_list" href="#"><i class="fas fa-broadcast-tower"></i>&nbsp;Radio Information</a></div></li>
  <!--<li><a id="search" href="#">Search</a></li>-->
  <li><canvas id="myCanvas" width="310" height="400" style="position: relative; top: 110px; left: 5px;">
Your browser does not support the canvas element.
</canvas></li>
</ul>





<div id="demo" style="margin-left:330px;padding:1px 16px;border:1px solid #e9ebee; border-radius:6px;">hello world</div>

1 Ответ

0 голосов
/ 03 октября 2018

Я просто использовал offsetX и offsetY здесь как быстрое решение, но вам нужен более безопасный способ получить положение щелчка мыши относительно холста, если вы хотите использовать его в работе.Вам нужно получить положение мыши, равное [0, 0], когда вы щелкаете по левому верхнему углу холста. 

var total_vap_count = 12;
var total_sta_count = 3;


//ac
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175,50,30,0,2*Math.PI);
ctx.fillStyle = "#004379";
ctx.font = "14px Lato";
if ("1" < 2){
    ctx.fillText("1" + " AC", 211, 50);
} else {
    ctx.fillText("2" + " ACs", 211, 50);
}
ctx.fill();




//sta
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175,300,30,0,2*Math.PI);
ctx.fillStyle = "#004379";
ctx.font = "14px Lato";
if (total_sta_count < 2){
    ctx.fillText("" + total_sta_count + " device", 211, 300);
} else {
    ctx.fillText("" + total_sta_count + " devices", 211, 300);
}
ctx.fillText("connected", 211, 315);
ctx.fill();

//ssid
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50,175,30,0,2*Math.PI);
ctx.fillStyle = "#004379";
ctx.font = "14px Lato";
if (total_vap_count < 2){
    ctx.fillText("" + total_vap_count + " SSID", 86, 175);
} else {
    ctx.fillText("" + total_vap_count + " SSIDs", 86, 175);
}
ctx.fill();




// ssid status
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50 + Math.sin(Math.PI/4) * 30,175-Math.cos(Math.PI/4) * 30,8,0,2*Math.PI);
if (total_vap_count){
    ctx.fillStyle = "#4caf50";
} else {
    ctx.fillStyle = "#ff0000";
}
ctx.fill();

// sta status
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175 + Math.sin(Math.PI/4) * 30,300 - Math.cos(Math.PI/4) * 30,8,0,2*Math.PI);
if (total_sta_count){
    ctx.fillStyle = "#4caf50";
} else {
    ctx.fillStyle = "#ff0000";
}
ctx.fill();

// ac status
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(175 + Math.sin(Math.PI/4) * 30,50 - Math.cos(Math.PI/4) * 30,8,0,2*Math.PI);
if (parseInt("1") > 0){
    ctx.fillStyle = "#4caf50";
} else {
    ctx.fillStyle = "#ff0000";
}
//ctx.fillStyle = "#e9ebee";
ctx.fill();

// Lines.
if (parseInt("1") > 0){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50 + Math.sin(Math.PI/4) * 30+10,175-Math.cos(Math.PI/4) * 30-10);
    ctx.lineTo(175 - Math.sin(Math.PI/4) * 30-5,50 + Math.cos(Math.PI/4) * 30+5);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#004379"
    ctx.stroke();
}

if (total_vap_count && total_sta_count){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(50 + Math.sin(Math.PI/4) * 30+5,175+Math.cos(Math.PI/4) * 30+ 5);
    ctx.lineTo(175 - Math.sin(Math.PI/4) * 30-5,300 - Math.cos(Math.PI/4) * 30-5);
    ctx.lineWidth = 3;
    ctx.strokeStyle = "#004379"
    ctx.stroke();
}






$(document).ready(function() {

 var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    
    var paint1 = setTimeout(()=>{
        ctx.font="16px FontAwesome";
        ctx.fillStyle = "white";
        ctx.fillText('\uf0ac',170, 55);
    },2000);

    
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    
    var paint2 = setTimeout(()=>{
        ctx.font="16px FontAwesome";
        ctx.fillStyle = "white";
        ctx.fillText('\uf10b',170, 305);
    },2000);

 
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    
    var paint3 = setTimeout(()=>{
        ctx.font="16px FontAwesome";
        ctx.fillStyle = "white";
        ctx.fillText('\uf012',45, 180);
    },2000);


    $('#myCanvas').click(function(e){
        var x = e.offsetX;
        var y = e.offsetY;

        //x start: 5, y start: 213 for canvas
        if (pointInCircle(x, y, 50, 175, 30)){
            //$j("#overview_page").hide();
            //openNav();
            $("#demo").empty().append("ssid clicked");
            
        }

        if (pointInCircle(x, y, 175, 300, 30)){
            //$j("#overview_page").hide();
            //openNav_sta();
            $("#demo").empty().append("sta clicked");
            
        }

        if (pointInCircle(x, y, 175, 50, 30)){
            //$j("#overview_page").hide();
            //openNav_ac();
            $("#demo").empty().append("ac clicked");
        }


    });

})

function pointInCircle(x, y, cx, cy, radius) {
  var distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
  return distancesquared <= radius * radius;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<canvas id="myCanvas" width="310" height="400" style="position: relative; top: 110px; left: 5px;">
Your browser does not support the canvas element.
</canvas>

<div id="demo"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...