图像查看器元素模式

当使用元素模式时，应用程序可以将任意HTML附加到元素并使用默认浏览器页面与添加的HTML交互，如按钮单击或文本框编辑。看到图像查看器用户定义的HTML主题以获取更多信息。

要获得完整的示例，请参考LEADTOOLS安装中包含的图像查看器样式演示。JavaScript版本的文档查看器演示在默认情况下也使用元素模式。

下面是使用的元素的层次结构，默认类名(下面进一步讨论):

<div><div类= " lt-view "><div类= " lt-item "><div类= " lt-clipping "><div类= " lt-flip "><div类= " lt-image-border "></ div><div类= " tutorial-image "><Img class="lt-backimage" /></ div><div类= " tutorial-image "><Img class="lt-image" /></ div></ div></ div><跨类= " lt-item-text "></跨度></ div><div类= " lt-item ">．．.</ div>.．.</ div></ div>

ViewDivHolderViewDiv项剪裁翻转边境回形象图像文本

每个元素都有一定的重要性:

• 视图Holder元素(imageview。ViewDivHolder）

  的父级ViewDiv．

• 视图元素(imageview。ViewDiv）

  保存项元素并显示查看器的视图边距、视图填充、视图边框和视图框阴影。

• 项目剪辑元素(ImageViewerItem。图像剪裁元素）

  当需要剪辑图像时，用作限制用户对图像元素的视图的屏障ImageViewerItem。ResizeOnTransform是假而且ImageViewerItem。ClipImageToContent是真正的．

• 物品翻转元素(ImageViewerItem。ImageFlipElement）

  用于内部协助平滑的CSS过渡时，CSS过渡应用和ImageViewerItem。翻转或ImageViewerItem。RotateAngle是改变。

• 图像边界元素(ImageViewerItem。图像边境元素）

  不是在图像元素周围创建CSS边框，而是将单个边框作为单独的边框应用< div >．这确保了图像在内部调整大小时边界不会拉伸。元素保存图像边界和图像阴影。

• 背面图像元素(ImageViewerItem。BackImageElement）

  如果使用的是部分透明的图像(如SVG)，需要背面图像，则使用此元素。否则，不创建。

• 图像元素(ImageViewerItem。ImageElement）

  保留实际的img或帆布正在查看。它不应该在CSS中被赋予边界或阴影，因为这是图像边界元素的工作。

• 文字/标题元素(ImageViewerItem。TextElement）

  保存项的标题集ImageViewerItem。文本．保存文本字体、大小和其他样式。

因为使用了HTML元素，所以可以将CSS样式和转换应用于元素。因此，不再需要也不允许在图像查看器中以编程方式设置这些属性。设置这些属性的值将被忽略并且不被使用:

• imageview。ViewBorderThickness

• imageview。ViewBorderColor

• imageview。ViewMargin

• imageview。ViewPadding

• imageview。ViewDropShadow

• imageview。项边境Thickness

• imageview。项边境Color

• imageview。ItemMargin

• imageview。ItemPadding

• imageview。图像边境Thickness

• imageview。图像边境Color

• imageview。图像DropShadow

• imageview。项BackgroundColor

• imageview。图像BackgroundColor

• imageview。SelectedItemBorderColor

• imageview。SelectedItemBackgroundColor

• imageview。HoveredItemBackgroundColor

• imageview。ActiveItemBackgroundColor

• imageview。ItemTextFont

• imageview。ItemTextWrap

• imageview。项文本Trimming

• imageview。项文本Color

• imageview。SelectedItemTextColor

这些属性现在完全由应用程序通过CSS处理，这导致了更快的UI。如下所述，在更新将改变任何项/元素大小的属性后，imageview。UpdateStyles—查看器将获得在CSS中可能已更改的新值，并在内部为这些属性设置值。这种方法是必需的，因为在标准HTML / DOM中没有自动处理检测CSS更改的自动方法。

由于这个变化，某些属性现在可以在不同的地方有不同的值——例如，两个不同的项目可能被赋予不同的项目边界宽度值。目前不支持不同项目的不同大小值，因此以下属性总是从已创建元素的第一个项目上的值计算出来(在某些事件中可能不是第一个元素)ImageViewerElementsModeCreateOptions。AutoRemoveItemElements是真正的：

• ImageBorderThickness

• ItemBorderThickness

• ItemMargin

• ItemPadding

此外，只有border-top-width的CSS值imageview。图像边境Thickness而且imageview。项边境Thickness．

CSS现在也可以用于以前项目不可用的其他属性-所有有效的CSS都是可用的。

覆盖必要的查看器规则，比如隐藏在某些元素上的overflow:，可能会产生意想不到的结果，应该避免。添加时，查看器将创建和添加一些<时尚>的元素< >头该文档列出了图像查看器正确运行所需的基本元素规则。

CSS规则可以由CSS类名选择器应用(例如.lt-item对于项)，这些都可以在ImageViewerElementsModeCreateOptions．这些元素模式特定的设置可以设置为ImageViewerCreateOptions。ElementsModeOptions属性，并将在创建查看器时读取。

ImageViewerElementsModeCreateOptions具有以下默认类名值:

ImageViewerElementsModeCreateOptions。ClassPrefix保存一个前缀，该前缀将在创建查看器时应用于彼此的类名——这允许将不同的样式应用于添加到同一页面的不同查看器。该前缀仅在构建查看器时应用，但用户可以通过真正的的参数ImageViewerElementsModeCreateOptions。克隆函数来接收每个类名的前缀版本。的ImageViewerElementsModeCreateOptions对象不应将前缀已应用的选项传递给查看器:不要传递从克隆函数。此函数在内部调用。

前缀值还有助于避免与页面上不涉及LEADTOOLS的其他类的类名冲突。

ImageViewerElementsModeCreateOptions也包含ImageViewerElementsModeCreateOptions。AutoRemoveItemElements属性，该属性控制页面上不在视图中的项。当AutoRemoveItemElements是真正的，移出视图的项将完全从页面中删除:从ImageViewerItem。ItemElement下是删除的，包括ImageViewerItem。图像或ImageViewerItem。帆布，无论使用哪个。这些元素完全重新创建时，项目必须回到视图中，如果一个图像曾经存在ImageViewerItem。图像然后ImageViewerItem。Url属性设置为触发对图像的新请求。图像应该由浏览器缓存。总的来说，自动删除项目应该会减少页面对于大量项目和/或大量图像所使用的内存。

项目添加后，由于ImageViewerElementsModeCreateOptions。AutoRemoveItemElements属性时，查看器将触发imageview。AutoItemElementsAdded事件。

在添加项目之前，由于ImageViewerElementsModeCreateOptions。AutoRemoveItemElements属性时，查看器将触发imageview。AutoItemElementsRemoved事件。

当必须删除和添加项元素时，使用这些事件可以帮助执行清理或其他任务。

现在，使用CSS，您可以轻松地设置活动item元素的背景颜色，如下所示，例如:

.lt-imageviewer .lt-item-active {/*活动项*/背景颜色:红色;｝

这个值lt-item-active来自应用程序的默认ImageViewerElementsModeCreateOptions。ClassPrefix（“lt”)ImageViewerElementsModeCreateOptions。ItemActiveClass（“item-active”)．任何一个值都可以在创建查看器之前更改，以创建完全自定义的类名。

其中的一些类名ImageViewerElementsModeCreateOptions不适用于元素，但适用于某些元素状态:

• ImageViewerElementsModeCreateOptions。ItemHoverClass

  类时，该类将应用于悬停项ImageViewerSelectItemsInteractiveMode．无论是否徘徊或选择应用CSS规则(如果两者都应该)取决于用户设置的CSS规则特异性。

• ImageViewerElementsModeCreateOptions。ItemSelectClass

  类时，该类将应用于所有选定项ImageViewerSelectItemsInteractiveMode．无论是否徘徊或选择应用CSS规则(如果两者都应该)取决于用户设置的CSS规则特异性。

• ImageViewerElementsModeCreateOptions。ItemActiveClass

  该类将应用于活动项。看到imageview。ActiveItem获取更多信息。

• ImageViewerElementsModeCreateOptions。ItemImageLoadingClass

  如果将图像设置为通过的项目ImageViewerItem。Url，项目将在发送URL请求和解析请求(成功或错误)之间设置这个类。

• ImageViewerElementsModeCreateOptions。ItemImageLoadedClass

  由于CSS规则应用程序的层次性，不可能根据项目图像的条件存在为项目应用样式。为了解决这个问题，ImageViewerElementsModeCreateOptions。ItemImageLoadedClass应用于类时，它有一个非空ImageViewerItem。ImageElement．

存在其他可以应用于元素的类，但用户既不定义它们的名称，也不定义它们的规则。这些类的定义在动态添加中定义<时尚>的元素< >头，都是用户所不关心的。

在图像查看器的元素模式中，对一个项目的元素的所有更新都发生在imageview。RenderItem而且imageview。PostRenderItem事件。请参阅呈现周期获取更多信息。

盒子阴影的CSS可以应用到项目图像的边界，如下所示:

.lt-image-border {/*框阴影(视图，项目，图像边框)*/Box-shadow: #333 1px 1px 4px -1px;｝

盒子阴影在旋转时不会自动保持视角。

虽然CSS转换可以应用到图像查看器元素的各个方面，但在某些情况下，内部代码必须禁用元素上的转换。以下操作可能导致禁用转换:

• 步进式变焦

• 滚动

• 锅

• 由于交互模式的移动(除非特别启用ImageViewerInteractiveMode。AutoDisableTransitions作为假）

• 调整浏览器大小

若要禁用转换，查看器将一个内部类应用于覆盖任何set转换的每个元素(使用重要的!CSS指令)。该类在更新发生后立即删除。调用DisableTransitions(应用样式)和EnableTransitions方法(删除样式)。用户可以使用这些方法手动禁用/重新启用转换。的IsTransitionsEnabled属性可用于检查查看器当前是否处于禁用转场的状态。

的ElementsUpdated当查看器更改属于视图或任何项的元素上的任何DOM或CSS属性时，事件就会发生。事件还包含ImageViewerElementsUpdatedEventArgs。IsTransitionsEnabled属性，该属性可用于检测图像查看器何时执行CSS转换。例如，文档查看器使用此事件在CSS转换生效时停止自定义绘制注释。