Question

我遇到了这段代码，并“使用”它作为开发我自己的特定切换功能的参考。

Raphael.js - if / else statement not toggling on click

我希望在点击时增加动画到每个说法的笔画宽度。我似乎无法弄清楚如何在切换功能旁边添加此动画。

我认为这将适用于变量StrON和StrOFF，因此我尝试了以下内容：

 var strOff = function() {
            this.animate({ 'stroke-width': '1' }, 100);

        }; 

    var strOn  = function() {
            this.animate({ 'stroke-width': '5' }, 100);

        };

甚至只是：

var strOff = 
        this.animate({ 'stroke-width': '1' }, 100);



var strOn  = 
        this.animate({ 'stroke-width': '5' }, 100);

对于懒惰的语法感到抱歉如果我错过了关于我尝试过的两个例子的任何内容。谢谢你的帮助。

Answer 1

这些都不会起作用，因为strOn和strOff不是正确的数据类型 - 它们必须是包含给定矩形的选定和取消选择状态的属性的对象。这代表了对animate所做的基本误解：它本质上是attr的异步版本。

您可以通过简单地将strOn和strOff恢复到其原始状态然后在给定矩形的单击处理程序中调用它来解决您的问题：

box1.animate( strOn, 100 );
box2.animate( strOff, 100 );
box3.animate( strOff, 100 );

这仍然会给您带来复杂性问题。如果要添加第四个或第五个矩形，您将很快陷入条件逻辑。在我看来，这种状态信息几乎从未像这样实现过。相反，我建议这样做：

使用单个通用点击处理程序。

var genericClickHandler = function()
{
    //  First step: find and deselect the currently "active" rectangle
    paper.forEach( function( el )
        {
            if ( el.data('box-sel' ) == 1 )
            {
                el.animate( strOff, 100 ).data('box-sel', 0 );
                return false; // stops iteration
            }
        } );
    this.animate( strOn, 100 ).data( 'box-sel', 1 );
}

这将遍历论文中的所有元素 - 如果其中一个被标记为“活动”，它将被动画回到其无效状态。

使用data跟踪所选矩形：

paper.rect( x1, y1, w1, h1 ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );    // note that we're setting data to indicate that this rectangle isn't "active"
paper.rect( x2, y2, w2, h2 ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );
// ... as many rectangles as you like
paper.rect( xN, yN, wN, hN ).attr( {} ).data( 'box-sel', 0 ).click( genericClickHandler );

使用这种方法，无需跟踪单个矩形 - 只需选择是否选择给定的矩形。

这是一个example supporting many rectangles。

将动画添加到RaphaelJS切换功能

1 个答案: