Question

我遇到了一个问题，我不知道该去哪里。

http://fiddle.jshell.net/f6rLds4g/3/

当我点击其中一个黑色矩形时，它显示“Rectangle 0 clicked”但画布消失了。

如何让它在画布中显示？

for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        document.getElementById("Display").innerHTML = 'Rectangle ' + i + ' clicked';
    }
}

Answer 1

  var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
canvas.height = 0;

var rects = [
    [20, 20, 150, 100],
    [20, 220, 150, 100]
   
    
   
];
for (var i = 0; i < rects.length; i++) {
    canvas.height = canvas.height + 200;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //rectangles opnieuw tekenen
    for (var j = 0; j < i; j++) {
        ctx.fillRect(rects[j][0],
        rects[j][1],
        rects[j][2],
        rects[j][3]);
    }
    ctx.fillRect(rects[i][0],
    rects[i][1],
    rects[i][2],
    rects[i][3]);

}

$('#NodeList').click(function (e) {
    var x = e.offsetX,
        y = e.offsetY;

for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        var canvas = document.getElementById("NodeDisplay");
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillText('Rectangle ' + i + ' clicked', 10, 10);
    }
}
});

 html, body {
            height: 100%;
            overflow: hidden;
          }
b {

margin-left: 75px;

}

#container {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
                }

a img {
                border:none;
}


 
.scrollbar{
    width:220px;
    height:1050px;
    border:1px solid #000;
    overflow:scroll;
	overflow-x: hidden;
	position: fixed;



}
.content{
width:auto;
height:100%;


} 		

#Display {

margin-left: 580px;
float: left;





}           






#NodeDisplay{

float: left;
height: 300px;
width: 600px;
margin-left: -200px;

	

}   



#canvas-wrap { 
    
position:fixed;                   
margin-left: 380px;
float: left;
position: fixed;
margin-top: 435px;

  
   }
#canvas-wrap canvas { 
    position:absolute; 
         top:0; 
         left:0; 
         z-index:0 } 

  
.een{
    
    height: auto;  
    width: 600px;
    
}

.twee{
    height: auto;  
    width: 600px;
}

.drie {
    height: auto;  
    width: 600px;
    
}

.vier{
    height: auto;  
    width: 600px;
    
}

<title>IIS7</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>



<body>



<b>Nodes</b>
<br>

<div class="scrollbar">
<div class="content">

<canvas  id="NodeList" width="200" height="300" >
     
</canvas>

</div>
</div>

<div class="Display" id="Display">
<canvas id="NodeDisplay" style="border:2px solid black;" >
    
</canvas>
</div>
   
      
    <div id="canvas-wrap">
<canvas width="600" height="600" style="border:2px solid black;"></canvas>
    <div id="overlay"></div>
    <div class="een" style="border:2px solid black;" >11111 </div>
    <div class="twee" style="border:2px solid black;" >22222 </div>
    <div class="drie" style="border:2px solid black;" >33333</div>
     <div class="vier" style="border:2px solid black;" >44444 </div>
   
      

 
    </div>
    </div>
   
   
</body>

点击事件

1 个答案: