|
Dear Mr. Thomas E Deweese,
I am using the _javascript_ and Batik
transform approach to implement scrollbar as your suggestion. It works
pretty well as it take advantage of the Batik caching. It shows much better
perceived performance than putting a Java scrollpane on a JPanel containing
the JSVGCanvas.
I think finally it works as follows:
<svg id="scrollPane1"
>
<element1/>
<element2/>
...
</svg>
Normally there is just one child of "scrollPane1" such as an
image, but there may be several elements. In the _javascript_ function
addScrollbar(), I will create vertical and horizontal scrollbars as g elements,
append these g elements to "scrollpane1" svg element. Then I will create a
new svg element (size = scrollpane1 size - scrollbar size),
create a new g elment and append element1, element2, ... to this g
element, append this g elment to the new svg element, and append this new
svg element to "scrollPane1" element. The _javascript_ function
apply trnasform to the new g element. It will look like
this:
<svg id="scrollPane1">
<g id="verticalScrollbar"/>
<g id="horizontalScrollbar"/>
<svg id="innerSvg">
<g transform="translate(0,0)">
<element1/>
<element2/>
...
</g>
</svg>
</svg>
I have problems to restrict these elements to "innerSvg"
bounds and manipulate the DOM tree. My questions is as follows:
1. I want use the internal svg element "innerSvg" to
automatically clip the scroll elements to its bounds. But the scroll elements
will clip to its bounds only in
<svg id="scrollPane1"
>
<element1/>
<element2/>
...
</svg>
After I added the scrollbar g elments to the "scrollPane1" svg
element as follows:
<svg id="scrollPane1"
>
<g id="verticalScrollbar"/>
<g id="horizontalScrollbar"/>
<g> <element1/>
<element2/>
...
</g>
</svg>
Then it won't clip to "scrollPane1" bound. Why it
work in this way? Must I use clip or something else?
2. How can move these elements from scrollPane1 to innerSvg?
That is, how to move a part of the DOM tree as a child of another node
in the same document? I tried to simply append the g element containing these
elements to "innerSvg", then remove it from "scrollPane1", but it won't
work. cloneNode(true) also does not work here. Must I use recursion to read
all children of the g element then append all to "innerSvg"? Is it
possible to manipulate in _javascript_?
Thank you very much.
With best regards,
William |
