zwibbler.js

zwibble.js                                           
  ：https://zwibbler.com/
api：https://zwibbler.com/docs/#introduction
Git          。

スタートはまず公式コードブロックを導入します.

    

    
    
    
    
    
   
    
        var zwibbler = Zwibbler.create("zwibbler", {
				 showToolbar: true,
			    showColourPanel: true
			    //                  
        });

        var saved = null;
        function onSave() {
            saved = zwibbler.save("zwibbler3");
            $("#loadButton").removeAttr("disabled");
        }

        function onLoad() {
            zwibbler.load("zwibbler3", saved);
        }

        function onImage() {
            var dataUrl = zwibbler.save("png");
            window.open(dataUrl, "other");
        }
    

剩下的就是官方的api 暂时楼主也是刚刚接触 以后会慢慢的更新，希望一起学习，这些也是测试用过的api

    showToolbar: false,//       
    showColourPanel: false,//        
    defaultFontSize: 22,//      
    multilineText: true,//            
    scrollbars: false,//       
    showPickTool: 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", 

ユーザーインターフェースを更新します.例えば、円を描くと、この方法が起動されます.

var zwibbler = Zwibbler.create("MyZwibblerDiv", {});
   zwibbler.on("document-changed", function() {
   
   });

カスタムツールを作成します.

function MyCustomTool(zwibblerContext) {
    //         
    this.ctx = zwibblerContext;
}

MyCustomTool.prototype = {
    enter: function() {
       //       zwibbler  
       //      。
    },

    leave: function() {
        //        zwibbler  
        //      。       。
    },

    onMouseClick: function(x, y, e) {
      //x，y         ，   
      //       。“e”   
      //    。        、    、  ，
      //                。
      //       false，  zwibbler   
      //stoppropagation（） preventdefault（）    。
    },

    onDoubleClick: function(x, y, e) {

    },

    onKeyCommand: function(action, e) {
       / /        keyboardconfiguration
       / / settion，    “  ”removed   
       / /          。  ：
       “  ”/“  ”、“  ”、“moveup”
    },

    onMouseDown: function(x, y, e) {

    },

    onMouseUp: function(x, y, e) {

    },

    onMouseMove: function(x, y, e) {
      //  e   keydown、pointermove、mousemove touch  。
    },

    onMouseWheel: function(x, y, change, e) {
        //  /    。
    },

    onContextMenu: function(x, y, change, e) {
        //  false              。
    },

    onTouch: function(x, y, e) {
      //    touchstart / e.type  ，touchend touchmove  。
      //return false，zwibbler         onmouse（）     。
        return false;
    },

    onColour: function(colourName) {
        // Called when the user selects a new colour
    },

    onOpacity: function(opacity) {
        //               。
    },

    onRedraw: function(canvasCtx) {
 	 //        HTML CanvasContext  
 	 //     。
    }
};

//    
ctx.useCustomTool(new MyCustomTool(ctx));
Zwibbler                   。  ，           ，      ，
        ，        。                  useCustomTool    。
        ，             。         。

小例

function TextStampTool(zwibblerContext, text, fontName, fontSize, doneFn) {
   
    this.ctx = zwibblerContext;
    this.text = text;
    this.fontName = fontName;
    this.fontSize = fontSize;
    this.doneFn = doneFn || function(nodeid) {};
}

TextStampTool.prototype = {
    enter: function() {
        this.ctx.setCursor("none");
    },

    leave: function() {
        this.ctx.setCursor("pointer");
        this.ctx.redraw();
    },

    onMouseClick: function(x, y, e) {
        this.ctx.beginTransaction();
        var node = this.ctx.createNode("TextNode", {
            fontName: this.fontName,
            fontSize: this.fontSize,
            text: this.text,
            scaleFont: false
        });
        this.ctx.translateNode(node, x, y);
        this.ctx.commitTransaction();
        this.ctx.usePickTool();
        this.doneFn(node);
    },

    onMouseMove: function(x, y, e) {
        var self = this;
        this.ctx.redraw(function(canvas) {
            canvas.fillStyle = "rgba(0,0,0,0.5)"; // 50% black
            canvas.font = self.fontSize + "px \"" + self.fontName + "\"";
            y += self.fontSize;
            canvas.fillText(self.text, x, y);
        });
    }
};

とりあえずスレ主はこんなに多く見ました.ゆっくり更新します.ありがとうございます.