2

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

Raphael.js - if / else 语句在点击时不切换

http://jsfiddle.net/YLrzk/1/

我想在单击时将动画应用于每个笔画宽度。我似乎无法弄清楚如何在切换功能旁边添加这个动画。

我认为这将应用于变量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);

对不起，懒惰的语法如果我错过了我尝试过的两个例子的任何内容。谢谢你的帮助。

4

1 回答 1

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 );

使用这种方法，不需要跟踪单个矩形——只需要一个给定的矩形是否被选中。

这是一个支持许多矩形的示例。

于 2012-12-12T18:43:10.873 回答