引用▼
用户自定义HTML的先决条件
要让应用程序利用这个特性，图像查看器元素模式必须使用。为了使用户能够与添加的元素进行本地交互，浏览器也必须支持HTML指针事件．
用于用户定义的HTML和本机交互
“用户定义的HTML”是指由用户或应用程序的其他部分创建或以其他方式提供的HTML(或SVG)元素imageview，而不是由浏览器自己创建或维护的图像或HTML5 Canvas Elements。这个HTML当然可以包含img或帆布，以及任何标题，列表，表单元素(如输入或按钮)，以及其他浏览器支持的元素。控件的边界将自动缩放和定位HTMLImageViewerItem它所连接的。
用户定义的HTML，当与BackImage属性或其他配置，可以在光栅图像上提供交互式PDF表单的外观。改变视图模式也可以为调查创造可能性ImageViewerItem成为一名听差。本质上，一个正常的imageview现在可以创建无限数量的个性化迷你网页，每个页面都有旋转、缩放、翻转、旋转、对齐、字幕和过渡。每个“页”都位于imageview这将起到页面管理器的作用，提供额外的对齐、组织和交互。
时可以与添加的元素进行交互pointer-eventsCSS规则可用。在这种情况下，添加的HTML可以配置为响应本机单击、悬停、拖动或任何其他受支持的浏览器指针事件。用户可以自由地将事件处理程序分配给任何元素，并在任何时候添加或删除元素。这是因为用户定义的HTML将位于互动模式通常捕获指针事件进行处理。的ElementInsertionHelper实用工具类(下面讨论)可以帮助用户定义HTML配置。
用户定义HTML的技术考虑因素
在此之前,一个ImageViewerItem在元素模式仍然只保留HTML图像元素(通过图像)或HTML5画布元素(通过帆布)．的元素属性可以接受任何HTML或SVG元素。它还将检测所提供的元素是否为img或帆布并设置图像或帆布相反，因为这些属性中的元素提供了额外的功能。一如既往，只有一个图像，帆布,元素可能会设置为ImageViewerItem．
BackImage使用任何HTML或SVG元素，而不是简单的HTML图像元素。但是，如果用户向BackImage用户不应该期望ImageViewerItem元素的重新配置PassthroughDiv(下文讨论)，除非元素也有用户定义的HTML。
新的帮助器方法具有类似的效果-CreateFromElement会在内部打电话CreateFromCanvas如果传递的参数实际上是a帆布．同样的道理AddFromElement，InsertFromElement,UpdateElement．
如在ImageViewer_Components时，将一些新元素添加到imageview支持潜在的用户交互。这些元素(EventCanvas而且PassthroughDiv)只在允许本地交互时才创建HTML指针事件．的EventCanvas取代了ForeCanvas作为指针交互的输入，而PassthroughDiv保存要与之交互的元素。
这是一个重要的区别——当PassthroughDiv时，将与之交互的任何元素移出ViewDiv．页面上的元素样式必须考虑到这一点，并应用(可能不同的)CSS选择器来匹配PassthroughDiv后代。这将在下面的“陷阱”一节中详细讨论。
有时候，并不是所有的元素都加入了元素属性是用来与之交互的-这包括容器元素，如div或部分那会妨碍到互动模式．为了处理这个问题，实用工具类ElementInsertionHelper的存在。ElementInsertionHelper提供强制或删除的方法pointer-events从提供的元素中完全控制用户定义的HTML的交互性。
的影响。用户定义的HTML不受AutoRemoveItemElements．
用户定义的HTML系统的缺陷
类的子元素，如上面所讨论的，用于本机交互的元素看起来仍然是ViewDiv但实际上是由PassthroughDiv．这意味着与请求父或子对象的DOM的交互可能不符合预期。这也意味着CSS可能需要修改以获得与ImageViewerItem没有本机交互和用户定义的HTML。考虑下面的例子——向项目添加一个“缩略图模式”类可能需要修改不同元素的不同样式:
.lt-imageviewer .lt-view。缩略图模式。lt-item {/*缩略图模式*/填充:15 px;padding-bottom: 70 px;｝.lt-imageviewer .lt-imageviewer-passthrough。缩略图模式。lt-image-clip {/*缩略图模式本地的交互项-更改页边距，而不是“剪裁”代替元素*/保证金:15 px;margin-bottom: 50 px;｝
这种情况不会产生良好、干净的代码，但允许在两个实例中产生相同的结果ImageViewerItem一个是常规图像，另一个是用户定义的HTML。
的CSS设置box-sizing．的imageview是否使用一致的box-sizing:“内容框”；这将应用于添加到的根元素元素．但是，该根的任何后代都不会具有显式的box-sizing值集。
元素添加时，内部方法将尝试获取根及其后代的自然大小，并调整ImageViewerItem在计算出的大小附近。由于CSS的异常和技术问题，特别是关于CSS框模型，这个值可能并不总是正确的。要排除故障，请尝试检查对添加的HTML有效的CSS规则，如果涉及到填充或边框，请考虑的值box-sizing．