| 文章索引 |
|---|
| 蓝骑士SVG教程:SVG动态与动画 |
| 第一课 SVG的变形属性 |
| 第二课 SVG动画 |
| 第三课 结合JavaScript产生SVG动画 |
| 第四课 SVG鼠标事件 |
| 第五课 SVG键盘事件 |
| 第六课 动态插入SVG元素 |
| 所有页面 |
页面 6 总共 7
和鼠标事件一样,键盘事件也能用脚本语言编写.组合键盘事件和文本元素,SVG创作者可以产生动态的交互. 在下面的例子中,先用鼠标在图片上点一下,然后试试用键盘敲如一些字母.
在上一课中,动画脚本引用的是与SVG元素关联的事件句柄.这里,我们使用键盘事件和定义的key_press过程函数来获取对元素的控制.
function key_press (event)
{
// Get the character-code of the key that was pressed.
var key = event.getCharCode();
// Get string equivalent of input character-code.
var input_text = String.fromCharCode(key);
// Determine which SVG text element to use for
// showing the entered key.
var elem_idx = next_letter + 1;
var elem_name = 'letter' + elem_idx;
var svgobj = svgdoc.getElementById(elem_name);
var svgstyle = svgobj.getStyle();
// To change the element's text, we set the data
// of its first child node.
svgobj.getFirstChild().setData (input_text);
...
}
{
// Get the character-code of the key that was pressed.
var key = event.getCharCode();
// Get string equivalent of input character-code.
var input_text = String.fromCharCode(key);
// Determine which SVG text element to use for
// showing the entered key.
var elem_idx = next_letter + 1;
var elem_name = 'letter' + elem_idx;
var svgobj = svgdoc.getElementById(elem_name);
var svgstyle = svgobj.getStyle();
// To change the element's text, we set the data
// of its first child node.
svgobj.getFirstChild().setData (input_text);
...
}
key_press过程函数中使用的技术我们已经在前面的"文本"和"动画"中讨论过了.对于每一个键盘敲击,它自动在SVG图像中设置一个文本元素,然后触发一个动画序列来完成文本元素的淡入背景效果.
