個人收藏的必備網頁設計控件，也許正是你在尋找的（七）

、圖像編輯器 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小時內與您取得聯系。

整合營銷服務商

個人收藏的必備網頁設計控件，也許正是你在尋找的（七）

擊事件教程

您的項目需求

個人收藏的必備網頁設計控件，也許正是你在尋找的（七）