个人收藏的必备网页设计控件，也许正是你在寻找的（七）

、图像编辑器 cropperjs

cropperjs是一个简易的图像编辑器，它有众多选项和方法，支持触屏设备。它可以对图像缩放、旋转、裁剪等操作。

主页：https://github.com/fengyuanchen/cropperjs

2、弹窗插件 FancyBox

FancyBox是一款基于jquery开发的插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframe内容，通过CSS自定义外观。

FancyBox相对于Lightbox而言，阴影效果更好，而且比Lightbox绚丽。

主页：https://github.com/fancyapps/fancyBox

3、响应式表格 FooTable

FooTable 是一个 jQuery 插件，主要的目的是将 HTML 的表格变成支持各种尺寸的设备，特别是在小屏幕设备上显示也是很棒的效果。而不需担心该表格拥有太多的列。

主页：https://github.com/fooplugins/FooTable

4、全屏滚动插件 fullPage.js

fullPage.js可以让你打造美丽的全屏滚动网站，使用它，不仅可以垂直滚动，水平也可以滚动。它使用方便，非常容易配置。

主页：https://github.com/alvarotrigo/fullPage.js

5、颜色选择器 tinyColorPicker

tinyColorPicker 是一个轻量的，可扩展并且丰富灵活的颜色选择器，它支持所有现代化的功能，如触摸和鼠标，GPU加速渲染等，并提供了大量插件和可扩展的UI。

主页：https://github.com/PitPik/tinyColorPicker

今天就介绍这几个了，闺女一直闹，得去哄孩子去了，下次继续，多谢支持。头条号：折翅的小鸟

战wxPython系列-044

本文介绍如何在Python的GUI工具中嵌入HTML页面。

wxPython的wx.html和wx.html2模块支持解析和显示HTML文件内容。wx.html.HtmlWindow对象是一个通用的HTML浏览器，但不是一个全功能的浏览器，所以支持的功能有限。wx.html.HtmlWindow只支持HTML标准的一个子集，不支持Javascript或者CSS。如果要支持全特性的HTML渲染组件，请使用wx.html2.WebView。

一、wx.html.HtmlWindow简介

wx.html.HtmlWindow控件的目的是显示基于HTML标准字迹的富内容页面（本地文件或者通过HTTP下载的网页文件），一定创建了该窗口控件，可以通过调用SetPage和LoadPage来设置它的内容。

wx.html.HtmlWindow支持的窗口样式：

wx.html.HW_SCROLLBAR_NEVER：不显示滚动条。
wx.html.HW_SCROLLBAR_AUTO：在需要的时候显示滚动条。
wx.html.HW_NO_SELECTION：用户不可以选择其中的文本(默认可以)。

wx.html.HtmlWindow发出的事件：

EVT_HTML_CELL_CLICKED：单击wx.html.HtmlCell时产生。
EVT_HTML_CELL_HOVER：鼠标经过一个wx.html.HtmlCell时产生。
EVT_HTML_LINK_CLICKED：单击了包含超链接的wx.html.HtmlCell时产生。

wx.html.HtmlWindow常用方法：

AppendToPage(self, source)：将HTML片段附加到当前显示的文本并刷新窗口。
GetOpenedAnchor(self)：返回当前打开页面中的锚点。如果没有打开任何页，或者所显示的页不是通过调用LoadPage生成的，则返回空字符串。
GetOpenedPage(self)：返回所打开页面的完整位置。如果没有打开任何页，或者所显示的页不是通过调用LoadPage生成的，则返回空字符串。
GetOpenedPageTitle(self)：返回所打开页面的标题，如果当前页面不包含< title >标记，则返回“”。
HistoryBack(self)：移动回上一页。只有使用LoadPage显示的页面才存储在历史列表中。
HistoryCanBack(self)：如果有可能在历史页面向后操作，即返回True。
HistoryCanForward(self)：如果有可能在历史中向前操作，即返回True。
HistoryClear(self)：清除历史页面。
HistoryForward(self)：移动到下一页。只有使用LoadPage显示的页面才存储在历史列表中。
LoadFile(self, filename)：从文件加载HTML页面并显示它。
LoadPage(self, location)：与SetPage不同，这个函数首先从给定的location加载HTML页面，然后显示它。
OnCellClicked(self, cell, x, y, event)：在wx.html.HtmlWindow内单击鼠标按钮时调用此方法。默认行为是发出wx.html.HtmlCellEvent，如果事件没有被处理或跳过，如果单元格包含超文本链接，则调用OnLinkClicked。
OnCellMouseHover(self, cell, x, y)：当鼠标移动到HTML单元格上时调用此方法。默认行为是发出wx.html.HtmlCellEvent。
OnLinkClicked(self, link)：当用户单击超文本链接时调用。默认行为是触发wx.html.HtmlLinkEvent，如果没有处理或跳过该事件，则调用LoadPage，不做任何其他事情。
OnOpeningURL(self, type, url)：在URL被打开时调用(当用户单击链接或加载图像时)。只有OnOpeningURL返回HTML_OPEN时，URL才会被打开。此方法由wx.html.HtmlParser.OpenURL调用。

图1：wx.html.HtmlWindow类继承关系

二、wx.html.HtmlWindow演示

Htmlwin.py文件

#html窗口(wx.html.HtmlWindow)

import wx
import wx.html

class SampleHtmlWindow(wx.Frame):

    def __init__(self, *args, **kw):
        super(SampleHtmlWindow, self).__init__(*args, **kw)

        self.InitUi()

    def InitUi(self):
        self.SetTitle("实战wxPython: HtmlWindow演示")
        self.SetSize(400, 300)

        panel=wx.Panel(self)
        vbox=wx.BoxSizer(wx.VERTICAL)
        hbox=wx.BoxSizer(wx.HORIZONTAL)

        htmlwin=wx.html.HtmlWindow(panel, wx.ID_ANY, style=wx.NO_BORDER)
        htmlwin.SetStandardFonts()
        htmlwin.LoadPage("page.html")
        """
        htmlwin.SetPage('''
            <html>
                <body bgcolor="#fdd22f">
                    <h1>这是标题</h1>
                    <b style="color:blue">实战wxPython</b>
                    <p>通过RGB值设置背景颜色</p>
                    <br/>
                    <p> 
                        这是一个段落
                    </p>
                    <i>这是斜体文本</i>
                </body>
            </html>
        ''')
        """

        vbox.Add((-1, 10), 0)
        vbox.Add(htmlwin, 1, wx.EXPAND | wx.ALL, 9)

        bitmap=wx.StaticBitmap(panel, wx.ID_ANY, wx.Bitmap("newt.png"))
        hbox.Add(bitmap, 0, wx.LEFT | wx.BOTTOM | wx.TOP, 10)

        btnOk=wx.Button(panel, wx.ID_ANY, "确定")
        self.Bind(wx.EVT_BUTTON, self.OnClose, id=btnOk.GetId())

        hbox.Add((100, -1), 1, wx.LEFT)
        hbox.Add(btnOk, flag=wx.TOP | wx.BOTTOM | wx.RIGHT, border=10)

        vbox.Add(hbox, 0, wx.EXPAND)

        panel.SetSizer(vbox)

        self.Centre()

    def OnClose(self, e):
        self.Close()

def main():
    app=wx.App()
    sample=SampleHtmlWindow(None)
    sample.Show()
    app.MainLoop()

if __name__=="__main__":
    main()

page.html文件

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<html>
    <table cellspacing="5" border="0" width="250">
        <tr width="200" align="left">
            <td bgcolor="#e7e7e7">  Maximum</td>
            <td bgcolor="#aaaaaa">  <b>9000</b></td>
        </tr>
        <tr align="left">
            <td bgcolor="#e7e7e7">  Mean</td>
            <td bgcolor="#aaaaaa">  <b>6076</b></td>
        </tr>
        <tr align="left">
            <td bgcolor="#e7e7e7">  Minimum</td>
            <td bgcolor="#aaaaaa">  <b>3800</b></td>
        </tr>
        <tr align="left">
            <td bgcolor="#e7e7e7">  Median</td>
            <td bgcolor="#aaaaaa">  <b>6000</b></td>
        </tr>
        <tr align="left">
            <td bgcolor="#e7e7e7">  Standard Deviation</td>
            <td bgcolor="#aaaaaa">  <b>6076</b></td>
        </tr>
    </table>
</html>

上面的示例演示了如何使用wx.html.HtmlWindow来加载一个html文件并显示它。

htmlwin=wx.html.HtmlWindow(panel, wx.ID_ANY, style=wx.NO_BORDER)
htmlwin.SetStandardFonts()
htmlwin.LoadPage("page.html")

创建wx.html.HtmlWindow对象，然后使用LoadPage方法加载文件。

图2：wx.html.HtmWindow演示

三、本文知识点

了解wx.html.HtmlWindow控件。
使用wx.html.HtmlWindow加载并显示HTML文件。

前一篇：wxPython - 高级控件之表格Grid

请关注，评论，收藏，点赞，和转发。

击事件教程

下面演示使用MxDraw云图编辑模式，在图上点击一个文字对象，然后得到文字内容，弹出文件内容提示窗口。

1、修改后台程序，增加一个函数，得到一个点的文字对象

（1）使用VSCODE打开安装目录Bin\MxDrawNode\MxDrawNode工程

（2）修改src\mxcaduser\MxCADUser.ts文件，增加一个MxCAD_FindEntAtPoint函数，该用来前台调用得到鼠标点击处的文字对象

（3）代码如下：

namespace MxCADUserFun {
    export function MxCAD_FindEntAtPoint(param: object): object {
        //let pt: Mx.McGePoint3d = new Mx.McGePoint3dClass();
        // 得到前台传过来的点坐标
        let pt: Mx.McGePoint3d =  Mx.Mx2DDraw.worldCoord2Doc(param["x"],param["y"]);
        // 得到搜索范围.
        let tol = Mx.Mx2DDraw.worldLong2Doc(param["tol"]);
        // 创建一个选择过滤条件.
        let filter: Mx.MrxDbgRbList = new Mx.MrxDbgRbListClass();
        // 只选择文字对象.
        filter.addString("TEXT",5020)
        let ss: Mx.MrxDbgSelSet = new Mx.MrxDbgSelSetClass();
        // 把pt点位的对象选择到选择集中.
        ss.selectAtPoint(pt, filter, tol);
        let txtString = "";
        if(ss.count > 0){
            // 选择集不为空.
            let txt:Mx.McDbText  = Mx.MxType.MxCastFromId<Mx.McDbText>(ss.item(0), Mx.MxType.TypeString.kMcDbText);   
            // 得到文字对象，文字内容.
            if(txt){
                txtString = txt.textString;
            }   
        }
        // 返回文字内容.
        let ret = {text:txtString};
        return ret;
    }
}
export function initMxCADUser() {
    // 在后台注册一个函数，用来前台JS调用。
    MxFun.registFun("MxCAD_FindEntAtPoint", MxCADUserFun.MxCAD_FindEntAtPoint); 
}

（4）编译代码，把Bin\MxDrawNode\MxDrawNode\dist下面的所有文件，拷到Bin\Release目录覆盖原来文件，后台程序重启后，就会使用最新编译的程序。

2、修改前台程序，响应鼠标的点击事件

（1）使用VSCODE打开安装目录SRC\sample\Edit\DevMxCAD工程，修改src\MxCADUser\MxUser.ts，增加鼠标事件的响应，在鼠标左键按下事件中，调用后台MxCAD_FindEntAtPoint得到点击的文字内容

（2）代码如下：

enum MouseButton {
  kInvalid = -1,
  kLeft = 0,
  kMid = 1,
  kRight = 2
};
class MxUserMouseEventTest
{
  
  public regist(mxFun:any) {
    mxFun.addWindowsEvent((type:string,event:any)=>{
      if(type == "mousedown"){
        // 如果当前有命令在运行，就不处理鼠标事件。
        if(mxFun.isRunningCommand() ){
          return 0;
        }
        // 只处理鼠标左键按下事件.
        if(event.button != MouseButton.kLeft)
        {
          return 0;
        }
        var srcElement = event.srcElement;
        if (srcElement && srcElement.tagName == "CANVAS") {
            // 得到鼠标点击的控件对象.
            let mxObj: MxDrawObject = mxFun.getMxObjectFormElement(srcElement);
            if (mxObj == null) {
                0;
            }
            // 把鼠标的屏幕坐标，转成图纸的显示坐标。
            //@ts-ignore
            const pt:THREE.Vector3 = mxObj.screenCoord2World(event.offsetX, event.offsetY, 0);
            //@ts-ignore
            const tol:number = mxObj.screenCoordLong2World(30);
            
            // 调用后台函数，得到鼠标点的对象.
            mxFun.call("MxCAD_FindEntAtPoint",{x:pt.x,y:pt.y,tol:tol},(ret:any)=>{
              // 得到文本.
              let str:string = ret["text"];
              if(str && str.length > 0){
                alert("点击文本:" + str);
              }
              else{
                console.log("点击文本为空");
              }
            });
            return 1;
          }
      }
      return 0;
    });
  };
}
export namespace MxUser {
  let mouseEventTest:MxUserMouseEventTest = null;
  export function Init(mxFun:MxFun):void{
    
    if(mxFun.getQueryString("mousetest") == "y"){
        // 注册鼠标事件.
        mouseEventTest = new MxUserMouseEventTest();
        mouseEventTest.regist(mxFun);
        // 禁用MxCAD本身的选择功能，这样不会与我们的鼠标点击发生冲突.
        mxFun.setIniset({ "EnableIntelliSelect": false });
    }
  }
};;

（3）编译代码，把SRC\sample\Edit\DevMxCAD\dist的所有文件拷到SRC\TsWeb\public\mxcad目录覆盖原来的文件，在重新访问mxcad页面时，就会使用最新程序了。

（4）使用VSCODE打开安装目录SRC\sample\Edit\VueMxCAD目录，修改SRC\sample\Edit\VueMxCAD\src\components\Home.vue文件，在启动访问mxcad页面加上访问参数，这些参数会在src\MxCADUser\MxUser.ts代码使用，用来启用鼠标测试功能。

（5）代码如下：

const src = "../../mxcad/?usemode=y&mousetest=y&file=test10.dwg";

（6）如下图:

（7）编译代码，把SRC\sample\Edit\VueMxCAD\distr的所有文件拷到SRC\TsWeb\public\sample\vuemxcad目录下，覆盖原来的文件，在重新访问vuemxcad页面时，就会使用最新程序了。

3、把测试图纸test10.dwg拷到SRC\TsWeb\public\demo目录下，启动程序

启动第一步，第二步,启动VueMxCAD，如下图：

在线咨询

上一篇：网络爬虫知识 day02
下一篇：Go语言SQL注入和防注入

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

个人收藏的必备网页设计控件，也许正是你在寻找的（七）

击事件教程

您的项目需求