1

背景にSVGの長方形、前景にHTMLテキストで構成されるボタンのようなオブジェクトを取得したいと思います。Raphael SVGライブラリは、SVG要素を作成、変更、およびアニメーション化するための優れた可能性を提供します。

Raphaelオブジェクトに沿って/上にDIV要素でHTMLテキストを描画するソリューションを見つけました。Raphaelのアニメーションメソッドを使用して、テキストを背景とともに移動させるにはどうすればよいですか？

基本的な2D移動にのみ関心があり、回転や変形はありません... RaphaelでサポートされているSVGテキスト要素を使用できることはわかっていますが、これではテキストの折り返し、テキストのスタイル設定（css）はできません。アニメーション中にアニメーションオブジェクトの座標を取得する方法を見つけようとしましたが、失敗しました。

上記の例madebyKelleyReynoldsに触発されたcoffeescriptのサンプルコードを次に示します。私の問題は、背景の動きをオーバーレイするdivと同期させる方法です。

nodeBox = (paper, params, attrs) ->
params = params or {}
attrs = attrs or {}
@paper = paper
@x = params.x or 0
@y = params.y or 0
@width = params.width or @paper.width
@height = params.height or @paper.height
@xMargin = params.xMargin or 5
@yMargin = params.yMargin or 5
@rounding = params.rounding or 0
@backgBox = this.paper.rect(@x-@xMargin, @y-@yMargin, @width+2*@xMargin, @height+2*@yMargin, this.rounding).attr(attrs)
containerId = @backgBox.node.parentNode.parentNode.id
containerId = containerId or @backgBox.node.parentNode.parentNode.parentNode.id
@container = jQuery('#' + containerId)

@div = jQuery('<div style="position: absolute; overflow: auto; width: 0; height: 0;"></div>').insertAfter(@container)
jQuery(document).bind('ready', this, (event) ->
    event.data.update()
    )
jQuery(window).bind('resize', this, (event) ->
    event.data.update()
    )
return this

# update function
nodeBox::update = () ->
offset = @container.offset()
@div.css(
    'top': (@y + (@rounding) + (offset.top)) + 'px',
    'left': (@x + (@rounding) + (offset.left)) + 'px',
    'height': (@height - (@rounding*2) + 'px'),
    'width': (@width - (@rounding*2) + 'px')
)

# animate function
nodeBox::animate = (attrs, duration, type) ->
    @backgBox.animate(attrs, duration, type)
    ###
    Animation of the  div ???
    ###

$(document).ready ->
paper = new Raphael document.getElementById('canvas_container'), '100%', '100%'
node1 = new nodeBox(paper, x:200, y:200, width:200, height:60, rounding: 10, xMargin: 8, yMargin: 4, 'showBorder': true).attr(fill: 'lightblue', stroke: '#3b4449', 'stroke-width': 3)
node1.div.html('This is some crazy content that goes inside of that box that will wrap around.')
node1.div.css('font-family': 'Helvetica','font-size': 16, 'text-align': 'justify')

# animate :
node1.animate({x: moveX}, 1000, 'bounce')
4

1 に答える 1

0

だから私は自分でこれを理解しました。最初の可能性は、Raphael2.xにすでに付属しているeveライブラリを使用することです。eve.on（）を使用して、背景ボックスの座標に対応するアニメーションのすべてのフレームのdivの座標を更新できます。

nodeBox::animate = (attrs, duration, type) ->

offset = @canvasContainer.offset()
strokeWidth = @backgBox.attrs['stroke-width']
textBox = @div
rounding = @rounding
xMargin = @xMargin
yMargin = @yMargin

### we animate the underlying box
@backgBox.animate(attrs, duration, type, eve.unbind('raphael.anim.frame.' + @backgBox.id, onAnimate))

    ### the coordinates of the div are updated on every frame
eve.on('raphael.anim.frame.' + @backgBox.id, onAnimate = (animationObject) ->
    textBox.css(
        'top': (@attrs.y + (rounding) + (yMargin) + (offset.top) + strokeWidth) + 'px',
        'left': (@attrs.x + (rounding) + (xMargin) +  (offset.left) + strokeWidth) + 'px', # scrollbar width
        'height': (@attrs.height - (rounding*2) - (yMargin*2) - strokeWidth + 'px'),
        'width': (@attrs.width - (rounding*2) - (xMargin*2) - strokeWidth + 'px')
        )
    )

このソリューションの欠点は、あまりスムーズに感じられないことです。ボックスの「後に」というテキストがすでに表示されています。したがって、Raphaelのプラグインが付属し、ベクターグラフィックとその上にあるDOMの同期アニメーションを提供するGreenSockAnimationPlatformを試していません。こちらをご覧ください

于 2013-02-25T17:45:09.747 に答える