【问题标题】:Is possible to have an event linked to object's own parameter?是否可以将事件链接到对象自己的参数?
【发布时间】:2013-01-14 11:12:08
【问题描述】:

我有一个带有特定参数(x、y 和半径)的对象(比如说一个圆)。

var circle = new Kinetic.Circle({
        x: 100,
        y: 100,
        radius: 20
}

圆的半径此后由用户动态更改。 现在我想要一个持续观察半径的监听器,每次半径低于 5 时,它都会删除圆。比如:

circle.on("radiusLessThanFive",function (e) {
this.remove();
}

那么如何配置这个不断监听圆半径的radiusLessThanFive事件呢?

【问题讨论】:

    标签: javascript events dom-events kineticjs


    【解决方案1】:

    不幸的是,没有内置的东西可以做到这一点。因此,您只需将其作为应用程序逻辑的一部分即可。

    假设您有一个名为 shapeLayer 的图层。你可以这样做:

    function radiusLessThanFive(){
        var circles = shapesLayer.get('.circle'); // I can't remember the getting all circles syntax, but something like this
        for ( var i=0; i<circles.length; i++) {
            if(cicrles[i].getRadius() < 5 ){
                circles[i].remove();
                shapesLayer.draw();
            }
        }
    }
    

    虽然这不是有史以来最有效的解决方案,但它可以完成工作......除非您知道如何在 javascript 中创建自己的自定义事件(无论如何都必须与上述函数执行相同的操作)。

    如果您想参加自定义活动路线,请点击以下链接:http://www.sitepoint.com/javascript-custom-events/

    编辑:关于下面的评论

    function radiusLessThanFive(myCircle){ //function which checks radius of single circle and deletes if less than 5
            if(myCircle.getRadius() < 5 ){
                myCircle.remove();
                myCircle.getParent().draw();
            }
        }
    }
    

    【讨论】:

    • 不是一个单独的函数来不断检查所有圆半径是否低于5,是不是可以在允许用户编辑半径的函数中包含该代码?因此,例如,当用户减小半径时,有一个 if 块来查看半径是否低于 5,如果是,则立即将其删除。这行得通吗?
    • 是的,这样就可以了。您所要做的就是修改上述函数,使其通过将圆作为属性传递给函数并检查其半径来完成单个圆的工作。我编写了上面的函数来考虑圆的动态创建,并且在更改半径的事件不是直接在圆上的用户事件(如动画)的情况下。如果您正在为一个圆圈设置动画并且有逻辑可以改变它的大小,那么您必须运行该函数来检查用户没有直接对对象进行操作。
    • 目前我的代码与您解释的逻辑相似。我喜欢你提到的创建自定义事件的想法,但由于 IE9 及以下不支持它,我还需要一段时间才能使用它。谢了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-18
    • 2022-12-16
    • 1970-01-01
    • 2011-09-02
    • 1970-01-01
    相关资源
    最近更新 更多