画布块区域悬停

时间：2017-05-15 11:31:01

标签： javascript html canvas

我模仿标签区域悬停在js。但是当在画布上放置画布时，悬停会被阻挡。但是当我将它放在图像下时，画布内容是不可见的。 我为每个区域创建了js函数，在初始化页面时，我将画布放在图像上。

var hdc;

// shorthand func
function byId(e){return document.getElementById(e);}

// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coOrdStr)
{
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i=2; i<n; i+=2)
    {
        hdc.lineTo(mCoords[i], mCoords[i+1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);
    hdc.stroke();
}

function drawRect(coOrdStr)
{
    var mCoords = coOrdStr.split(',');
    var top, left, bot, right;
    left = mCoords[0];
    top = mCoords[1];
    right = mCoords[2];
    bot = mCoords[3];
    hdc.fillRect(left,top,right-left,bot-top); 
}

function myHover(element)
{
    var hoveredElement = element;
    var coordStr = element.getAttribute('coords');
    var areaType = element.getAttribute('shape');

    switch (areaType)
    {
        case 'polygon':
        case 'poly':
            drawPoly(coordStr);
            break;

        case 'rect':
            drawRect(coordStr);
            break;
    }
}

function myLeave()
{
    var canvas = byId('myCanvas');
    hdc.clearRect(0, 0, canvas.width, canvas.height);
}

function myInit()
{
    // get the target image
    var img = byId('main');

    var x,y, w,h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;
    //alert(x + " " + y + " " + w + " " + h); 

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('myCanvas');
    imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = -1;
    // position it over the image
    can.style.left = x+'px';
    can.style.top = y+'px';

    // make same size as the image
    can.setAttribute('width', w+'px');
    can.setAttribute('height', h+'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 4;
}
#back_1 {
	background-color: #cecece;
	height: 720px;
	margin: 0px auto;
	text-align: center;
}

#main {
	width: 700px;
	high: 700px; 
	line-height: 0;
	border: none;
}

#bolshevism {
	height: 300px;
	background-color: #b30106;
}

.text_1 {
	width: 1320px;
	padding-top: 70px;
	margin: 0px auto; 
	text-align: left;
	
}

.head {
	font: bold 40px Ubuntu-B;
}
.line {
	width: 500px;
	padding-top: 10px; 
	padding-bottom: 10px;
}

.descriprion{
	font: 20px Ubuntu-B;
}

.text_2 {
	width: 1320px;
	padding-top: 70px;
	margin: 0px auto;
	text-align: right;
}

.authoritarian {
	color: #ffffff;
}

#myCanvas {
	position: absolute;
}
<body onload="myInit()">
		<canvas id='myCanvas'></canvas>
		<div id="back_1">
			<img src="http://i.imgur.com/XQ5KueE.png" id="main" usemap="#map"ismap>
			<div>
				<map name="map">
					<area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,128" alt="Bolshevism">	
				</map>
			</div>
      </div>
    <div id="bolshevism" class="authoritarian">
			<div class="text_1">
				<a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
				<p class="descriprion">Bolshevism is the term used to describe the beliefs and practices of the Bolsheviks, the members of a political movement in Russia during the early 20th century.  Bolsheviks were a faction of the Marxist Russian Social Democratic Labour Party (RSDLP) which split apart from the Menshevik faction at the Second Party Congress in 1903. The RSDLP was a revolutionary socialist political party formed in 1898 in Minsk in Belarus to unite the various revolutionary organisations of the Russian Empire into one party.</p>
			</div>
		</div>
     </body>

1 个答案:

答案 0 :(得分：0)

只需添加指针事件：无; 

var hdc;

// shorthand func
function byId(e){return document.getElementById(e);}

// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function drawPoly(coOrdStr)
{
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i=2; i<n; i+=2)
    {
        hdc.lineTo(mCoords[i], mCoords[i+1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);
    hdc.stroke();
}

function drawRect(coOrdStr)
{
    var mCoords = coOrdStr.split(',');
    var top, left, bot, right;
    left = mCoords[0];
    top = mCoords[1];
    right = mCoords[2];
    bot = mCoords[3];
    hdc.fillRect(left,top,right-left,bot-top); 
}

function myHover(element)
{
    var hoveredElement = element;
    var coordStr = element.getAttribute('coords');
    var areaType = element.getAttribute('shape');

    switch (areaType)
    {
        case 'polygon':
        case 'poly':
            drawPoly(coordStr);
            break;

        case 'rect':
            drawRect(coordStr);
            break;
    }
}

function myLeave()
{
    var canvas = byId('myCanvas');
    hdc.clearRect(0, 0, canvas.width, canvas.height);
}

function myInit()
{
    // get the target image
    var img = byId('main');

    var x,y, w,h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;
    //alert(x + " " + y + " " + w + " " + h); 

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('myCanvas');
    imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = -1;
    // position it over the image
    can.style.left = x+'px';
    can.style.top = y+'px';

    // make same size as the image
    can.setAttribute('width', w+'px');
    can.setAttribute('height', h+'px');

    // get it's context
    hdc = can.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
    hdc.fillStyle = 'red';
    hdc.strokeStyle = 'red';
    hdc.lineWidth = 4;
}
#back_1 {
	background-color: #cecece;
	height: 720px;
	margin: 0px auto;
	text-align: center;
}

#main {
	width: 700px;
	high: 700px; 
	line-height: 0;
	border: none;
}

#bolshevism {
	height: 300px;
	background-color: #b30106;
}

.text_1 {
	width: 1320px;
	padding-top: 70px;
	margin: 0px auto; 
	text-align: left;
	
}

.head {
	font: bold 40px Ubuntu-B;
}
.line {
	width: 500px;
	padding-top: 10px; 
	padding-bottom: 10px;
}

.descriprion{
	font: 20px Ubuntu-B;
}

.text_2 {
	width: 1320px;
	padding-top: 70px;
	margin: 0px auto;
	text-align: right;
}

.authoritarian {
	color: #ffffff;
}

#myCanvas {
    position:absolute;
	pointer-events:none;
}
<body onload="myInit()">
		<canvas id='myCanvas'></canvas>
		<div id="back_1">
			<img src="http://i.imgur.com/XQ5KueE.png" id="main" usemap="#map"ismap>
			<div>
				<map name="map">
					<area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,128" alt="Bolshevism">	
				</map>
			</div>
      </div>
    <div id="bolshevism" class="authoritarian">
			<div class="text_1">
				<a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
				<p class="descriprion">Bolshevism is the term used to describe the beliefs and practices of the Bolsheviks, the members of a political movement in Russia during the early 20th century.  Bolsheviks were a faction of the Marxist Russian Social Democratic Labour Party (RSDLP) which split apart from the Menshevik faction at the Second Party Congress in 1903. The RSDLP was a revolutionary socialist political party formed in 1898 in Minsk in Belarus to unite the various revolutionary organisations of the Russian Empire into one party.</p>
			</div>
		</div>
     </body>

相关问题
最新问题