基於JQ的canvas外掛→zwibbler，畫圖外掛簡單介紹，附下載地址

阿新 • • 發佈：2019-01-30

zwibbler外掛是國外的個人寫的作品，很好用，可是不開源（定製收費），不過原始碼可以找到。
官網：http://zwibbler.com
官方API：http://zwibbler.com/docs
zwibbler作者郵箱：[email protected]

效果圖1：畫板編輯（最全）
效果圖2：視訊截圖+畫板編輯（簡化） ( 此專案需要IDE執行起來才可看效果 )
效果圖3：靜態資源截圖+畫板編輯（簡化）-效果圖： ( html2Canvas.js )

1、首先引用官方JS檔案，然後寫以下程式碼，畫板即可顯示

<!doctype html> <html> <body> <div id="zwibbler" style="margin-left:auto;margin-right:auto;border:2px solid red;width:800px;height:600px;"></div> <input type="button" onclick="onImage()" value="Open as image"/> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://zwibbler.com/zwibbler-demo.js"></script> <script type="text/javascript"> var zwibbler = Zwibbler.create("zwibbler", { showPropertyPanel: true }); function onImage() { var dataUrl = zwibbler.save("png"); window.open(dataUrl, "other"); } </script> </body> </html>

2、然後官方文件很詳細，不過是全英文的，以下整理一些自己用到的API。

var zwibbler = Zwibbler.create("zwibbler", {
    showToolbar: false,//是否顯示工具欄
    showColourPanel: false,//是否顯示顏色畫板
    defaultFontSize: 22,//文字字型大小
    multilineText: true,//文字工具是否允許設定換行
    scrollbars: false,//是否顯示滾動條
    showPickTool: false,//是否在內建工具欄中顯示選擇工具(箭頭選擇工具) 

    sloppy: false,
    allowTextInShape: false,//禁止使用者在封閉形狀內寫入字
    autoPickTool: false,//繪製形狀後，是否允許使用者繪製相同型別的形狀。
    defaultStrokeStyle: "#ff0000",//預設為#000000（預設圖形顏色）
    defaultBrushColour: "#ff0000",//預設為#000000（預設刷子顏色）
    defaultBrushWidth:2,//畫筆的寬度
    //defaultArrowSize:15,//控制箭頭工具中箭頭的大小
    //defaultArrowStyle: 'solid',//箭頭樣式  simple solid 

    defaultLineWidth: 3,//圖形的邊框寬度
    //defaultStrokeStyle: 'blue',//圖形的邊框顏色
    defaultTextFillStyle:'red',//文字的顏色
    backgroundImage: "http://localhost:64435/Content/img/top_bg.jpg", 
    //defaultZoom: "width",//縮放背景適應整個畫板（測試沒反應） width  page
});

3、方法

zwibbler.newDocument();//重繪（可用作清空）畫板內容
zwibbler.useLineTool({//單機箭頭工具欄時觸發
                arrowStyle: "solid",//如改變箭頭工具的形狀及大小
                arrowSize: 20
            });
zwibbler.useRectangleTool({//單機矩形工具欄時觸發
                fillStyle: "transparent"//此屬性為矩形的填充色，該屬性值為透明
            });
zwibbler.useCircleTool({//單機圓形工具欄時觸發
                fillStyle: "transparent"
            });
zwibbler.setZoom(0.6);//如新增背景圖片後，可縮放背景圖

基於JQ的canvas外掛→zwibbler，畫圖外掛簡單介紹，附下載地址

1、首先引用官方JS檔案，然後寫以下程式碼，畫板即可顯示

2、然後官方文件很詳細，不過是全英文的，以下整理一些自己用到的API。

3、方法

基於JQ的canvas外掛→zwibbler，畫圖外掛簡單介紹，附下載地址

Ubuntu 16.04安裝Grub Customizer替代Startup-manager（解決找不到menu.lst，GRUB配置簡單介紹）

Tomcat的簡單介紹，安裝，以及簡單的配置運用

Qt的簡單介紹，發展和由來

CelebA資料集簡單介紹，及做人臉識別時資料集的處理

RakNet簡單介紹，最新版本分享

java_正則簡單介紹，正則匹配頁面時經常會遇見各種不匹配，下面是我copy過來的一些正則語法嘗試和一些常用正則表示式

JavaBean，POJO的簡單理解，JavaBean與Spring中bean的區別

CSS3 的視口單位vw、vh實現自適應（帶有px，em，rem的簡單介紹）

【Tomcat】tomcat簡單介紹，安裝以及啟動（一）

Oracle中 UNION和UINON ALL的區別，IS和AS的區別（簡單介紹，以後逐漸詳細）

Android 網路訪問框架retrofit2，okhttp3之簡單封裝，kotlin原始碼

ObjectOutputStream 和 ObjectInputStream類的簡單介紹，及運用。

Eclipse安裝JEebel外掛並破解（附下載地址）

.lib .dll .pdb 的簡單介紹，以及除錯dll原始碼

30.1. MySQL數據庫簡介，客戶端簡單操作，安裝

Newbe.Claptrap 框架入門，第二步 —— 簡單業務，清空購物車

LAMP架構介紹，MYSQL和MariaDB介紹，MYSQL安裝

程式設計師學習資料（1）—附下載地址，持續更新

掃描二維碼下載app，判斷是Android還是ios，並跳轉到不同的下載地址

基於JQ的canvas外掛→zwibbler，畫圖外掛簡單介紹，附下載地址

1、首先引用官方JS檔案，然後寫以下程式碼，畫板即可顯示

2、然後官方文件很詳細，不過是全英文的，以下整理一些自己用到的API。

3、方法

相關推薦