Textfield插件官方文档

Textfield Plugin textfield.swf / html5:internVersion 1.19
for Flash and HTML5

  • 该插件用于显示简单文本。
  • 通过layer/plugin的标准属性可以定义插件的尺寸和对齐方式。
  • 如果没有设定插件尺寸,则使用文本本身的尺寸。
  • 可使用少量的 HTML标签、简单的CSS标签或者类似BBCCode标签来格式化文字。但需要注意的是,Flashplayer仅支持一个很小的子集!因此不要尝试使用真正的HTML/CSS代码!不支持CSS类!
  • textfield插件直接内嵌在HTML5 viewer。当使用textfield.swf 文件时会自动调用viewer中的插件。

更新于krpano 1.19 pr4

语法

插件属性

属性名 类型 默认值
html String “”
  • 设置 HTML / CSS / BBCode 格式的文本。
  • HTML / CSS 代码会由Flashplayer (Flash-viewer) 或者浏览器 (HTML5-viewer)来解析!Flashplayer 自身只支持HTML4的一个小的子集!要在Flash和HTML5得到相同的效果,只能使用非常简单的HTML格式的文本。不推荐在HTML代码内使用图像,Flashplayer对此支持得很差。
  • 下面是Flashplayer中关于HTML的说明文档: http://help.adobe.com/…/TextField.html#htmlText
  • 当不能使用 < 以及 > 字符的时候(例如在xml属性内),你可以使用 [ 以及 ] 字符来代替- krpano会自动进行转换。如果你要使用 [] 字符,请用 [[]]代替。
  • 两种设置HTML文本的方法:
    1. 直接在HTML属性中使用。
      html=”[b]Bold Text[/b]”
    2. 或通过调用<data>元素的data:name
      html=”data:htmltext”
  • 可以在HTML代码中加入a属性来执行krpano actions, 你可以使用event:actions作为链接。
    <a href=”event:showlog(); trace(‘link clicked’);”>link</a>
属性名 类型 默认值
css String “”
  • 为HTML文本设置CSS文本。
  • HTML / CSS 代码会由Flashplayer (Flash-viewer) 或者浏览器 (HTML5-viewer)来解析!Flashplayer 自身只支持HTML4的一个小的子集!要在Flash和HTML5得到相同的效果,只能使用非常简单的HTML格式的文本。CSS类的用法并不支持。
  • Flashplayer对CSS的说明 http://help.adobe.com/…/StyleSheet.html
  • 两种设置CSS样式的方法::
    1. 直接使用CSS属性:
      css=”text-align:center; color:#FFFFFF; font-family:Arial;”
    2. 或者通过<data>元素的data:name进行调用:
      css=”data:cssstyles”
  • 设定字体大小时,为了使Flash和HTML5中有同样的效果,使用“px”很重要。 它允许krpano在移动设备中对字体尺寸进行缩放。
  • 若在css数值中出现 0x ,则自动转换为 #  ,使其在krpano xml中使用相同的颜色数值语法。
属性名 类型 默认值
autowidth
autoheight
String
String
“auto”
“auto”
自动处理插件尺寸 – 文本的尺寸自动作为插件的尺寸。

设定值:

  • auto – 自动模式- 如果没有设置插件尺寸,则使用文本尺寸作为插件尺寸。
  • true – 始终使用文本尺寸,忽略插件尺寸设置。
  • false – 对插件尺寸不做任何自动化处理。


onautosized 事件可用于提醒插件尺寸发生改变。

属性名 类型 默认值
vcenter Boolean false
  • 在给定的插件高度中在垂直方向置中文本。
  • 提示 – 在CSS属性中使用 text-align:center;在水平方向上置中文本。
属性名 类型 默认值
padding String “2”
文本周围的间距或空隙。每一边都可以单独设置。

有四种不同的设置方法(与CSS相同):

  • padding=”25″
    • 四个边距都是25px
  • padding=”25 50″
    • 上下为25px
    • 左右为50px
  • padding=”25 50 75″
    • 上为25px
    • 左右为50px
    • 下为275px
  • padding=”25 50 75 100″
    • 上为25px
    • 右为50px
    • 下为75px
    • 左为100px
属性名 类型 默认值
wordwrap Boolean true
  • 定义文本是否自动折行。只有完整的单词才能折行。
  • 如果设置了autowidth,则wordwrap无效。
属性名 类型 默认值
selectable Boolean false
  • 用户是否可以选择文本。
属性名 (仅Flash可用) 类型 默认值
embeddedfonts Boolean false
  • 是否使用内嵌的Flash字体。
  • 当设定可使用时,如果没有给定字体所设置的内嵌字体,这样指定使用的内嵌字体的文本将不会显示。
  • 更多细节查看- 使用内嵌Flash字体
属性名 (仅HTML5可用) 类型 默认值
interactivecontent Boolean false
  • krpano默认是不会传递鼠标事件到内置的文本域html内容中,以避免事件跟踪的冲突。
  • 当设定可使用时,则屏蔽上述默认设置,鼠标事件也会传递到文本域html内容中。
  • 当html内容包含<a>或<iframe>元素,该设置自动启用。
属性名 类型 默认值
background
backgroundcolor
backgroundalpha
Boolean
int
Number
true
0xFFFFFF
1.0
  • 在文本域后面绘制一个背景。
  • backgroundcolor – 背景颜色(默认为白色)。
  • backgroundalpha – 背景透明度。
属性名 类型 默认值
border
bordercolor
borderalpha
borderwidth
Boolean
int
Number
Number
false
0x000000
1.0
1.0
  • 在文本域周围绘制边框。
  • bordercolor – 文本框边框颜色。
  • borderalpha – 文本框边框透明度。
  • borderwidth – 边框线宽(会在文本域外围增加)
属性名 类型 默认值
roundedge String “0”
  • 使得文本域边角产生圆弧。
  • 按照像素为单位定义边角圆弧。
  • 可以单独设置四个数值(用空格分开)。它们按照以下顺序指定:左上角、右上角、右下角、左下角。如果忽略左下角,则左下角的值与右上角一样。如果忽略右下角,则右下角的值与左上角相同。如果忽略右上角,则右上角的值与左上角相同。
属性名 类型 默认值
shadow
shadowrange
shadowangle
shadowcolor
shadowalpha
Number
Number
Number
int
Number
0.0
4.0
45.0
0x000000
1.0
在文本域背后添加阴影。

  • shadow – 阴影距离。0即没有阴影。如果用光晕效果请使用0.01之类的数值。
  • shadowrange – 阴影模糊范围。
  • shadowangle – 阴影角度。
  • shadowcolor – 阴影颜色
  • shadowalpha – 阴影透明度。
属性名 类型 默认值
textshadow
textshadowrange
textshadowangle
textshadowcolor
textshadowalpha
Number
Number
Number
int
Number
0.0
4.0
45.0
0x000000
1.0
在文本背后放置阴影。

  • textshadow – 阴影距离。0即是没有阴影。如果用光晕效果请使用0.01之类的数值。
  • textshadowrange – 阴影模糊范围。
  • textshadowangle – 阴影角度。
  • textshadowcolor – 阴影颜色。
  • textshadowalpha – 阴影透明度。

插件事件

属性名 类型 默认值
onautosized String “”
  • 当插件自动尺寸被使用(查看 autowidth 与 autoheight) 并且尺寸发生改变时执行。
  • 注意 – 因为自动断词,当html内容改变时可能会产生多于一个的onautosized事件。Flash和HTML5的事件数量有所不同。

HTML5注意事项

每次文本设置发生变化时,将会从内部构建一个新的文本元素。一旦这个构建完成,浏览器将返回新元素的尺寸,新的文本元素将会替换当前的文本元素。这就避免在变化时出现移动和变动的文本。

这种方法基本上是没有问题的,但因为元素的替换,可能会导致浏览器丢失部分鼠标事件 – 例如在鼠标悬停onover事件中发生文本替换时,可能会丢失鼠标离开onout事件。

为了避免这样的问题,可以在不需要重建文本的情况下改变部分设定。这些设定不会改变最终文本的尺寸,因此可以安全地直接使用。

这些设置包括:

  • background, backgroundcolor, backgroundalpha
  • bordercolor, borderalpha
  • roundedge
  • shadow*, textshadow*


注意 – border设置不包括在内,因为它会改变文本尺寸,需要为正确的对齐重新计算。如果希望在鼠标事件中改变边界样式,仅能使用borderalpha设定。

使用内嵌Flash字体

可以使用Flash创造的内嵌字体,即使用户的电脑没有安装字体,也可以使用特定的字体。

你需要编译一个小型简单的as3源文件,才能打包这样的SWF文件,所有字体将会内嵌在其中,官方有这样的as3源文件下载- embeddedfonts.as.。文本域插件无需再次编译来使用内嵌字体。在Textfield插件源代码包括完整的例子,其中有将as3文件自动编译为swf文件的批处理工具。

当内嵌字体的swf文件准备好时,需要在 <plugin> 中设置 preload=true。文本本身需要选择这个字体,设置embeddedfonts=true<。

<!– preload the embedded fonts swf –>
<plugin url=”embeddedfonts.swf” preload=”true” devices=”flash” /><!– the test textfield with ‘myFont’ and embeddedfonts=true –>
<layer name=”test”
url=”textfield.swf”
align=”center”
css=”font-family:myFont; font-size:16px;”
html=”Test text…”
embeddedfonts=”true”
padding=”10 20″
/>

Textfield插件源代码

提供krpano文本插件的免费下载。可供学习插件开发使用。

下载包里包括编译源代码到SWF文件的批处理文件。此外,还包括构建内嵌字体的SWF文件的案例。

krpano Flash Textfield Plugin Sourcecode (Source code and building scripts, ZIP, ~5 MB)

在 “Textfield插件官方文档” 上有 2 条评论

发表评论