我想要一個類似按鈕的對象,包含一個SVG矩形作爲前景中的背景和HTML文本。 Raphael SVG庫爲創建,修改和動畫SVG元素提供了很好的可能性。在div元素中使用拉斐爾SVG元素設置動畫文本
I found a solution可以沿着Raphael對象/在Raphael對象上繪製DIV元素中的HTML文本。我如何使用Raphael的動畫方法使文本隨背景移動?
我只對基本的2D運動感興趣,沒有旋轉或變形......我知道我可以使用支持拉斐爾的SVG文本元素,但是這不允許我文本包裝,文本樣式(css )。我試圖找到一個方法來獲取動畫過程中的動畫對象的座標失敗。
下面是一些coffeescript中的示例代碼,靈感來自上面的例子,Kelley Reynolds。我的問題是如何將你的背景的運動與覆蓋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(@[email protected], @[email protected], @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')
請提供代碼或jsfiddle示例 – Dom 2013-02-22 15:24:45