如何抵消 createjs 按钮助手的点击区域？答案

【问题标题】：How to offset createjs button helpers' hit area?如何抵消 createjs 按钮助手的点击区域？
【发布时间】：2016-05-13 03:59:07
【问题描述】：

我正在使用按钮助手来允许单击显示框和文本区域。如果您将鼠标悬停在框上，则只有大约 2/3 的框是可点击的。

并且所选区域允许在右侧框外。如何正确设置可点击区域？只是该框应该是可点击的

Game Link to see example - 灰色方向框位于链接的第二页。

        self.stage.addChild(titleText);
        var directionsbox = new createjs.Container();
        displaybox = new createjs.Shape();
        displaybox.graphics.beginFill("gray").drawRoundRect(0, 0, 550, 350, 8);
        displaybox.name = "DirectionsBox";
        displaybox.x = 125;
        displaybox.y = 120;

        var label = new createjs.Text("\n" + gameData.Description + "\n\n\nDirections  \n \nThere are 3 levels to complete.  \nEach level gets a bit faster.  \nYour high sccore will automataly be submited to the Arcade. \n\n\nClick here to start sorting.", "bold 20px Arial", "#FFFFFF");
        label.textAlign = "center";
        label.lineWidth = 550;
        label.y = displaybox.y;
        label.x = displaybox.x + 275

        directionsbox.addChild(displaybox, label);
        self.stage.addChild(directionsbox);

        var helper = new createjs.ButtonHelper(displaybox, "out", "over", "down", false, displaybox, "hit");
        helper.y = displaybox.y;
        helper.x = displaybox.x + 275
        displaybox.addEventListener("click", handleClick);
        function handleClick(event) {
            createjs.Sound.play("click");
            self.stage.removeChild(directionsbox);
            StartInteraction();
        }

【问题讨论】：

标签： javascript button html5-canvas createjs

【解决方案1】：

您的 hitArea 的问题是您明确使用您的实例作为它自己的 hitArea。 HitAreas 旨在自动定位到其内容。因为您的 displaybox 已经设置了 x/y，所以它添加到 hitArea 的位置，该位置已经相对于可见的 displayBox 定位。

在您的示例中，您只需将 ButtonHelper 的 hitArea 参数设置为 null。这将使 ButtonHelper 使用实际可见内容作为 hitArea，效果很好。如果要使用外部实例，可以克隆 DisplayBox，将其 x/y 设置为 0，然后使用它。

// Just use null
var helper = new createjs.ButtonHelper(displaybox, "out", "over", "down", false, null, "hit");

// Use a new instance
var hitbox = displayBox.clone().set({x:0, y:0});
var helper = new createjs.ButtonHelper(displaybox, "out", "over", "down", false, hitbox, "hit");

希望对您有所帮助。

【讨论】：