如标题中所述，我希望对象的 onmouseover 事件将其缩放到其大小的1.2，然后在 onmouseout 事件上我希望它缩小原来的大小（1）。但 onmouseout 事件未返回其原始大小。相关代码如下：
var renderer = PIXI.autoDetectRenderer(800, 500, { backgroundColor: 0x1099bb });
$("#container").append(renderer.view);
var stage = new PIXI.Container();
var container = new PIXI.Container();
stage.addChild(container);
var bunnyArray = new Array();
for (var i = 0; i < 5; i++)
{
bunnyArray[i] = new Array();
}
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
var rect = new PIXI.Graphics();
var width = 70;
rect.lineStyle(1, randomColor());
rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(width*i,width*j, width + width * rect.scale.x, width + width * rect.scale.y);
//rect.position.x =10;
//rect.position.y = 10;
rect.position.set(width * i, width * j);
rect.zIndex = 2;
rect.drawRect(0, 0, width, width);
bunnyArray[i][j] = rect;
container.addChild(bunnyArray[i][j]);
}
}
for (var i = 0; i < bunnyArray.length; i++)
{
for (var j = 0; j < bunnyArray[i].length; j++)
{
bunnyArray[i][j].on("click", onClick);
bunnyArray[i][j].on("mouseover", onMouseover);
bunnyArray[i][j].on("mouseout", onMouseout);
}
}
container.x = 200;
container.y = 60;
renderImage();
function renderImage()
{
requestAnimationFrame(renderImage);
//renderer.render(container);
renderer.render(container);
//renderer.render(stage);
}
function animate() {
requestAnimationFrame(animate);
var bunny1 = thisPointer;
bunny1.rotation += 0.03;
cancelAnimationFrame(request);
}
function Scale(pointer) {
pointer.scale.x += 0.2;
pointer.scale.y += 0.2;
pointer.zIndex = 4;
return pointer;
}
function ScaleDel(requestPointer) {
//pointer.scale.x -= 0.2;
//pointer.scale.y -= 0.2;
if (requestPointer != undefined || requestPointer != null)
{
requestPointer.mouseover = null;
}
}
var thisPointer;
var request;
function onClick(eventData)
{
thisPointer = calcuatePos(eventData);
request = requestAnimationFrame(animate);
thisPointer.rotation = 0;
}
var requestPointer;
function onMouseover(eventData)
{
var thisPointer = calcuatePos(eventData);
//request = requestAnimationFrame(Scale);
requestPointer= Scale(thisPointer);
}
function onMouseout(eventData)
{
ScaleDel(requestPointer);
}
//生成随机颜色
function randomColor() {
var colorStr = Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase();
return "000000".substring(0, 6 - colorStr) + colorStr;
}
//判断是否点击了这个东西
function calcuatePos(eve)
{
var x = (eve.data.global.x);
var y = (eve.data.global.y);
x =x- container.x;
y =y- container.y;
var increaseRectScale = 70;
for (var i = 0; i < bunnyArray.length; i++) {
for (var j = 0; j < bunnyArray[i].length; j++) {
var instance = bunnyArray[i][j];
//increaseRectScale *= instance.scale.x;
if (instance.position.x <= x && instance.position.x + increaseRectScale >= x && instance.position.y <= y && instance.position.y + increaseRectScale >= y) {
//instance.pivot.set(increaseRectScale/2 , increaseRectScale/2 );
var a = document.createElement('a');
a.href = randomLink();
a.target = '_blank';
a.style.visibility = "hidden";
document.body.appendChild(a);
a.click();
return instance;
}
}
}
}
container.updateLayersOrder = function () {
container.children.sort(function (a, b) {
a.zIndex = a.zIndex || 0;
b.zIndex = b.zIndex || 0;
return b.zIndex - a.zIndex;
});
}
function randomNumber()
{
return Math.ceil(Math.random() * 10);
}
function randomLink()
{
var hyperLink = "";
var number = randomNumber();
switch (number)
{
case 0:
hyperLink = "http://www.baidu.com";
break;
case 1:
hyperLink = "http://www.17173.com";
break;
case 2:
hyperLink = "http://www.stackoverflow.com";
break;
case 3:
hyperLink = "http://www.163.com";
break;
case 4:
hyperLink = "http://www.5173.com";
break;
case 5:
hyperLink = "http://www.sina.com";
break;
case 6:
hyperLink = "http://www.qq.com";
break;
case 7:
hyperLink = "http://www.hp.com";
break;
case 8:
hyperLink = "http://www.youku.com";
break;
case 9:
hyperLink = "http://www.tudou.com";
break;
}
return hyperLink;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://files.cnblogs.com/files/kmsfan/pixi.js"></script>
<div id="container"></div>
答案 0 :(得分：0)
你使用“+ =”来放大Rect，正如Goose Ninja所说，你没有在ScaleDel函数中缩小。如果您希望比例因子为1.2，则只需设置为此比例。
事实证明，您不需要函数calculatePos来检测目标对象，因为PIXI会在交互式回调中将this绑定到它们 - http://www.goodboydigital.com/pixi-js-now-even-better-at-being-interactive/
这是一个codepen：http://codepen.io/anon/pen/qOXKEZ。我刚刚更改了onMouseOver和noMouseOut函数，并将每个对象的hitArea设置为一个局部矩形：new PIXI.Rectangle(0,0, width,width)
function onMouseover(eventData)
{
//var thisPointer = calcuatePos(eventData);
//request = requestAnimationFrame(Scale);
//requestPointer= Scale(thisPointer);
this.scale.set(1.2,1.2);
}
function onMouseout(eventData)
{
//ScaleDel(calcuatePos(eventData));
this.scale.set(1.0,1.0);
}