Question

我模仿标签区域悬停在js中，我为每个区域创建了js函数。所以，正如你所看到的，矩形区域（布尔什维克主义）被绘制在内，但保利地区（乌托邦社会主义）只有一个轮廓。

＆＃13;

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 = "rgba(230,236,247,0.5)";
    hdc.strokeStyle = "rgba(230,236,247,0.5)";
    hdc.lineWidth = 2;
}

＆＃13;

.menu {
    position: fixed; /* Фиксированное положение */
    right: 50px; /* Расстояние от правого края окна браузера */
    top: 90%; /* Расстояние сверху */
}

#back_1 {
	background-color: #cecece;
	height: 720px;
	margin: 0px auto;
	text-align: center;
}

#main {
	width: 700px;
	height: 700px; 
	line-height: 0;
	border: none;
}

#bolshevism {
	height: 300px;
	background-color: #b30106;
}

.text_1 {
	width: 1200px;
	padding-top: 70px;
	margin: 0px auto; 
	text-align: left;
	
}
.text_2 {
	width: 1200px;
	padding-top: 70px;
	margin: 0px auto;
	text-align: right;
}
#utopian_socialism {
	background-color: #eb3913;height: 330px;
}
#myCanvas {
	position: absolute;
	pointer-events:none;
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Political Spectrum</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
		<script type="text/javascript" src="js/jquery.localScroll.min.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body onload="myInit()">
	<canvas id='myCanvas'></canvas>
		<div id="back_1">
		<map name="map"><a id="picture"></a>
			<img src="http://i.imgur.com/Vk1e2hW.png" id="main" usemap="#map"ismap>
			<div>
      <area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,130" alt="Bolshevism">
      <area href="#utopian_socialism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="poly" coords="59,466,172,466,172,590,139,590,139,599,59,599" alt="Social Democracy">
      <div id="bolshevism" class="authoritarian">
			<div class="text_1">
				<a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
				<img src="images/line.png"class="line"/>
				<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>
				<p class="link"><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span><a href="https://en.wikipedia.org/wiki/Bolsheviks" target="_blank">Bolshevism</a></span></p>
			</div>
		</div>
    <div id="utopian_socialism" class="authoritarian">
			<div class="text_1">
				<a id="utopian_socialism_1"><p class="head">UTOPIAN SOCIALISM</p></a>
				<img src="images/line.png"class="line"/>
				<p class="descriprion">Utopian socialism is a label used to define the first currents of modern socialist thought as exemplified by the work of Henri de Saint-Simon, Charles Fourier, Étienne Cabet, and Robert Owen. Utopian socialism is often described as the presentation of visions and outlines for imaginary or futuristic ideal societies, with positive ideals being the main reason for moving society in such a direction. Later socialists and critics of utopian socialism viewed "utopian socialism" as not being grounded in actual material conditions of existing society, and in some cases, as reactionary. These visions of ideal societies competed with Marxist-inspired revolutionary social democratic movements.<span class="link"><a href="https://en.wikipedia.org/wiki/Utopian_socialism" target="_blank">[wiki]</a></span></p>
				<p class="link"><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span><a href="https://en.wikipedia.org/wiki/Utopian_socialism" target="_blank">Utopian Socialism</a></span></p>
			</div>
		</div>
    </body>
</html>

＆＃13;

Answer 1

之后

private class NoAnimationItemAnimator extends SimpleItemAnimator {
    @Override
    public boolean animateRemove(RecyclerView.ViewHolder holder) {
        dispatchRemoveFinished(holder);

        return false;
    }

    @Override
    public boolean animateAdd(RecyclerView.ViewHolder holder) {
        dispatchAddFinished(holder);

        return false;
    }

    @Override
    public boolean animateMove(RecyclerView.ViewHolder holder, int fromX, int fromY, int toX, int toY) {
        dispatchMoveFinished(holder);

        return false;
    }

    @Override
    public boolean animateChange(RecyclerView.ViewHolder oldHolder, RecyclerView.ViewHolder newHolder, int fromX, int fromY, int toX, int toY) {
        dispatchChangeFinished(oldHolder, true);
        dispatchChangeFinished(newHolder, false);

        return false;
    }

    @Override
    public void runPendingAnimations() {
        // stub
    }

    @Override
    public void endAnimation(RecyclerView.ViewHolder item) {
        // stub
    }

    @Override
    public void endAnimations() {
        // stub
    }

    @Override
    public boolean isRunning() {
        return false;
    }
}

您应该添加以下行：

hdc.stroke();

所以你的多边形将用颜色填充。

Canvas Poly区域没有涂漆

1 个答案: