個(gè)人收藏的必備網(wǎng)頁(yè)設(shè)計(jì)控件，也許正是你在尋找的（七）

、圖像編輯器 cropperjs

cropperjs是一個(gè)簡(jiǎn)易的圖像編輯器，它有眾多選項(xiàng)和方法，支持觸屏設(shè)備。它可以對(duì)圖像縮放、旋轉(zhuǎn)、裁剪等操作。

主頁(yè)：https://github.com/fengyuanchen/cropperjs

2、彈窗插件 FancyBox

FancyBox是一款基于jquery開(kāi)發(fā)的插件。支持對(duì)放大的圖片添加陰影效果，對(duì)于一組相關(guān)的圖片添加導(dǎo)航操作按紐，該lightbox除了能夠展示圖片之外，還可以展示iframe內(nèi)容，通過(guò)CSS自定義外觀。

FancyBox相對(duì)于Lightbox而言，陰影效果更好，而且比Lightbox絢麗。

主頁(yè)：https://github.com/fancyapps/fancyBox

3、響應(yīng)式表格 FooTable

FooTable 是一個(gè) jQuery 插件，主要的目的是將 HTML 的表格變成支持各種尺寸的設(shè)備，特別是在小屏幕設(shè)備上顯示也是很棒的效果。而不需擔(dān)心該表格擁有太多的列。

主頁(yè)：https://github.com/fooplugins/FooTable

4、全屏滾動(dòng)插件 fullPage.js

fullPage.js可以讓你打造美麗的全屏滾動(dòng)網(wǎng)站，使用它，不僅可以垂直滾動(dòng)，水平也可以滾動(dòng)。它使用方便，非常容易配置。

主頁(yè)：https://github.com/alvarotrigo/fullPage.js

5、顏色選擇器 tinyColorPicker

tinyColorPicker 是一個(gè)輕量的，可擴(kuò)展并且豐富靈活的顏色選擇器，它支持所有現(xiàn)代化的功能，如觸摸和鼠標(biāo)，GPU加速渲染等，并提供了大量插件和可擴(kuò)展的UI。

主頁(yè)：https://github.com/PitPik/tinyColorPicker

今天就介紹這幾個(gè)了，閨女一直鬧，得去哄孩子去了，下次繼續(xù)，多謝支持。頭條號(hào)：折翅的小鳥(niǎo)

戰(zhàn)wxPython系列-044

本文介紹如何在Python的GUI工具中嵌入HTML頁(yè)面。

wxPython的wx.html和wx.html2模塊支持解析和顯示HTML文件內(nèi)容。wx.html.HtmlWindow對(duì)象是一個(gè)通用的HTML瀏覽器，但不是一個(gè)全功能的瀏覽器，所以支持的功能有限。wx.html.HtmlWindow只支持HTML標(biāo)準(zhǔn)的一個(gè)子集，不支持Javascript或者CSS。如果要支持全特性的HTML渲染組件，請(qǐng)使用wx.html2.WebView。

一、wx.html.HtmlWindow簡(jiǎn)介

wx.html.HtmlWindow控件的目的是顯示基于HTML標(biāo)準(zhǔn)字跡的富內(nèi)容頁(yè)面（本地文件或者通過(guò)HTTP下載的網(wǎng)頁(yè)文件），一定創(chuàng)建了該窗口控件，可以通過(guò)調(diào)用SetPage和LoadPage來(lái)設(shè)置它的內(nèi)容。

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

wx.html.HW_SCROLLBAR_NEVER：不顯示滾動(dòng)條。
wx.html.HW_SCROLLBAR_AUTO：在需要的時(shí)候顯示滾動(dòng)條。
wx.html.HW_NO_SELECTION：用戶(hù)不可以選擇其中的文本(默認(rèn)可以)。

wx.html.HtmlWindow發(fā)出的事件：

EVT_HTML_CELL_CLICKED：?jiǎn)螕魒x.html.HtmlCell時(shí)產(chǎn)生。
EVT_HTML_CELL_HOVER：鼠標(biāo)經(jīng)過(guò)一個(gè)wx.html.HtmlCell時(shí)產(chǎn)生。
EVT_HTML_LINK_CLICKED：?jiǎn)螕袅税溄拥膚x.html.HtmlCell時(shí)產(chǎn)生。

wx.html.HtmlWindow常用方法：

AppendToPage(self, source)：將HTML片段附加到當(dāng)前顯示的文本并刷新窗口。
GetOpenedAnchor(self)：返回當(dāng)前打開(kāi)頁(yè)面中的錨點(diǎn)。如果沒(méi)有打開(kāi)任何頁(yè)，或者所顯示的頁(yè)不是通過(guò)調(diào)用LoadPage生成的，則返回空字符串。
GetOpenedPage(self)：返回所打開(kāi)頁(yè)面的完整位置。如果沒(méi)有打開(kāi)任何頁(yè)，或者所顯示的頁(yè)不是通過(guò)調(diào)用LoadPage生成的，則返回空字符串。
GetOpenedPageTitle(self)：返回所打開(kāi)頁(yè)面的標(biāo)題，如果當(dāng)前頁(yè)面不包含< title >標(biāo)記，則返回“”。
HistoryBack(self)：移動(dòng)回上一頁(yè)。只有使用LoadPage顯示的頁(yè)面才存儲(chǔ)在歷史列表中。
HistoryCanBack(self)：如果有可能在歷史頁(yè)面向后操作，即返回True。
HistoryCanForward(self)：如果有可能在歷史中向前操作，即返回True。
HistoryClear(self)：清除歷史頁(yè)面。
HistoryForward(self)：移動(dòng)到下一頁(yè)。只有使用LoadPage顯示的頁(yè)面才存儲(chǔ)在歷史列表中。
LoadFile(self, filename)：從文件加載HTML頁(yè)面并顯示它。
LoadPage(self, location)：與SetPage不同，這個(gè)函數(shù)首先從給定的location加載HTML頁(yè)面，然后顯示它。
OnCellClicked(self, cell, x, y, event)：在wx.html.HtmlWindow內(nèi)單擊鼠標(biāo)按鈕時(shí)調(diào)用此方法。默認(rèn)行為是發(fā)出wx.html.HtmlCellEvent，如果事件沒(méi)有被處理或跳過(guò)，如果單元格包含超文本鏈接，則調(diào)用OnLinkClicked。
OnCellMouseHover(self, cell, x, y)：當(dāng)鼠標(biāo)移動(dòng)到HTML單元格上時(shí)調(diào)用此方法。默認(rèn)行為是發(fā)出wx.html.HtmlCellEvent。
OnLinkClicked(self, link)：當(dāng)用戶(hù)單擊超文本鏈接時(shí)調(diào)用。默認(rèn)行為是觸發(fā)wx.html.HtmlLinkEvent，如果沒(méi)有處理或跳過(guò)該事件，則調(diào)用LoadPage，不做任何其他事情。
OnOpeningURL(self, type, url)：在URL被打開(kāi)時(shí)調(diào)用(當(dāng)用戶(hù)單擊鏈接或加載圖像時(shí))。只有OnOpeningURL返回HTML_OPEN時(shí)，URL才會(huì)被打開(kāi)。此方法由wx.html.HtmlParser.OpenURL調(diào)用。

圖1：wx.html.HtmlWindow類(lèi)繼承關(guān)系

二、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("實(shí)戰(zhàn)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>這是標(biāo)題</h1>
                    <b style="color:blue">實(shí)戰(zhàn)wxPython</b>
                    <p>通過(guò)RGB值設(shè)置背景顏色</p>
                    <br/>
                    <p> 
                        這是一個(gè)段落
                    </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來(lái)加載一個(gè)html文件并顯示它。

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

創(chuàng)建wx.html.HtmlWindow對(duì)象，然后使用LoadPage方法加載文件。

圖2：wx.html.HtmWindow演示

三、本文知識(shí)點(diǎn)

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

前一篇：wxPython - 高級(jí)控件之表格Grid

請(qǐng)關(guān)注，評(píng)論，收藏，點(diǎn)贊，和轉(zhuǎn)發(fā)。

擊事件教程

下面演示使用MxDraw云圖編輯模式，在圖上點(diǎn)擊一個(gè)文字對(duì)象，然后得到文字內(nèi)容，彈出文件內(nèi)容提示窗口。

1、修改后臺(tái)程序，增加一個(gè)函數(shù)，得到一個(gè)點(diǎn)的文字對(duì)象

（1）使用VSCODE打開(kāi)安裝目錄Bin\MxDrawNode\MxDrawNode工程

（2）修改src\mxcaduser\MxCADUser.ts文件，增加一個(gè)MxCAD_FindEntAtPoint函數(shù)，該用來(lái)前臺(tái)調(diào)用得到鼠標(biāo)點(diǎn)擊處的文字對(duì)象

（3）代碼如下：

namespace MxCADUserFun {
    export function MxCAD_FindEntAtPoint(param: object): object {
        //let pt: Mx.McGePoint3d = new Mx.McGePoint3dClass();
        // 得到前臺(tái)傳過(guò)來(lái)的點(diǎn)坐標(biāo)
        let pt: Mx.McGePoint3d =  Mx.Mx2DDraw.worldCoord2Doc(param["x"],param["y"]);
        // 得到搜索范圍.
        let tol = Mx.Mx2DDraw.worldLong2Doc(param["tol"]);
        // 創(chuàng)建一個(gè)選擇過(guò)濾條件.
        let filter: Mx.MrxDbgRbList = new Mx.MrxDbgRbListClass();
        // 只選擇文字對(duì)象.
        filter.addString("TEXT",5020)
        let ss: Mx.MrxDbgSelSet = new Mx.MrxDbgSelSetClass();
        // 把pt點(diǎn)位的對(duì)象選擇到選擇集中.
        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);   
            // 得到文字對(duì)象，文字內(nèi)容.
            if(txt){
                txtString = txt.textString;
            }   
        }
        // 返回文字內(nèi)容.
        let ret = {text:txtString};
        return ret;
    }
}
export function initMxCADUser() {
    // 在后臺(tái)注冊(cè)一個(gè)函數(shù)，用來(lái)前臺(tái)JS調(diào)用。
    MxFun.registFun("MxCAD_FindEntAtPoint", MxCADUserFun.MxCAD_FindEntAtPoint); 
}

（4）編譯代碼，把Bin\MxDrawNode\MxDrawNode\dist下面的所有文件，拷到Bin\Release目錄覆蓋原來(lái)文件，后臺(tái)程序重啟后，就會(huì)使用最新編譯的程序。

2、修改前臺(tái)程序，響應(yīng)鼠標(biāo)的點(diǎn)擊事件

（1）使用VSCODE打開(kāi)安裝目錄SRC\sample\Edit\DevMxCAD工程，修改src\MxCADUser\MxUser.ts，增加鼠標(biāo)事件的響應(yīng)，在鼠標(biāo)左鍵按下事件中，調(diào)用后臺(tái)MxCAD_FindEntAtPoint得到點(diǎn)擊的文字內(nèi)容

（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"){
        // 如果當(dāng)前有命令在運(yùn)行，就不處理鼠標(biāo)事件。
        if(mxFun.isRunningCommand() ){
          return 0;
        }
        // 只處理鼠標(biāo)左鍵按下事件.
        if(event.button != MouseButton.kLeft)
        {
          return 0;
        }
        var srcElement = event.srcElement;
        if (srcElement && srcElement.tagName == "CANVAS") {
            // 得到鼠標(biāo)點(diǎn)擊的控件對(duì)象.
            let mxObj: MxDrawObject = mxFun.getMxObjectFormElement(srcElement);
            if (mxObj == null) {
                0;
            }
            // 把鼠標(biāo)的屏幕坐標(biāo)，轉(zhuǎn)成圖紙的顯示坐標(biāo)。
            //@ts-ignore
            const pt:THREE.Vector3 = mxObj.screenCoord2World(event.offsetX, event.offsetY, 0);
            //@ts-ignore
            const tol:number = mxObj.screenCoordLong2World(30);
            
            // 調(diào)用后臺(tái)函數(shù)，得到鼠標(biāo)點(diǎn)的對(duì)象.
            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("點(diǎn)擊文本:" + str);
              }
              else{
                console.log("點(diǎn)擊文本為空");
              }
            });
            return 1;
          }
      }
      return 0;
    });
  };
}
export namespace MxUser {
  let mouseEventTest:MxUserMouseEventTest = null;
  export function Init(mxFun:MxFun):void{
    
    if(mxFun.getQueryString("mousetest") == "y"){
        // 注冊(cè)鼠標(biāo)事件.
        mouseEventTest = new MxUserMouseEventTest();
        mouseEventTest.regist(mxFun);
        // 禁用MxCAD本身的選擇功能，這樣不會(huì)與我們的鼠標(biāo)點(diǎn)擊發(fā)生沖突.
        mxFun.setIniset({ "EnableIntelliSelect": false });
    }
  }
};;

（3）編譯代碼，把SRC\sample\Edit\DevMxCAD\dist的所有文件拷到SRC\TsWeb\public\mxcad目錄覆蓋原來(lái)的文件，在重新訪問(wèn)mxcad頁(yè)面時(shí)，就會(huì)使用最新程序了。

（4）使用VSCODE打開(kāi)安裝目錄SRC\sample\Edit\VueMxCAD目錄，修改SRC\sample\Edit\VueMxCAD\src\components\Home.vue文件，在啟動(dòng)訪問(wèn)mxcad頁(yè)面加上訪問(wèn)參數(shù)，這些參數(shù)會(huì)在src\MxCADUser\MxUser.ts代碼使用，用來(lái)啟用鼠標(biāo)測(cè)試功能。

（5）代碼如下：

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

（6）如下圖:

（7）編譯代碼，把SRC\sample\Edit\VueMxCAD\distr的所有文件拷到SRC\TsWeb\public\sample\vuemxcad目錄下，覆蓋原來(lái)的文件，在重新訪問(wèn)vuemxcad頁(yè)面時(shí)，就會(huì)使用最新程序了。

3、把測(cè)試圖紙test10.dwg拷到SRC\TsWeb\public\demo目錄下，啟動(dòng)程序

啟動(dòng)第一步，第二步,啟動(dòng)VueMxCAD，如下圖：

在線(xiàn)咨詢(xún)

上一篇：網(wǎng)絡(luò)爬蟲(chóng)知識(shí) day02
下一篇：Go語(yǔ)言SQL注入和防注入

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

個(gè)人收藏的必備網(wǎng)頁(yè)設(shè)計(jì)控件，也許正是你在尋找的（七）

擊事件教程

您的項(xiàng)目需求