<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="/css/fabric.master.css" rel="stylesheet" /> <link href="/css/fabric.freedrawing.css" rel="stylesheet" /> <script src="https://cdn.bootcss.com/fabric.js/3.6.2/fabric.min.js"></script> <style> #drawing-mode { margin-bottom: 10px; vertical-align: top; } #drawing-mode-options { display: inline-block; vertical-align: top; margin-bottom: 10px; margin-top: 10px; background: #f5f2f0; padding: 10px; } label { display: inline-block; width: 130px; } .info { display: inline-block; width: 25px; background: #ffc; } #bd-wrapper { min-width: 1500px; } </style> </head> <body> <form id="form1"> <div id="bd-wrapper" ng-controller="CanvasControls"> <h2><span>Fabric.js demos</span> · Free drawing</h2> <style> #drawing-mode { margin-bottom: 10px; vertical-align: top; } #drawing-mode-options { display: inline-block; vertical-align: top; margin-bottom: 10px; margin-top: 10px; background: #f5f2f0; padding: 10px; } label { display: inline-block; width: 130px; } .info { display: inline-block; width: 25px; background: #ffc; } #bd-wrapper { min-width: 1500px; } </style> <div style="display: block;"> <canvas id="c" height="750" width="1200" style="border: 1px solid #aaa;"></canvas> </div> <div style="display: inline-block; margin-left: 10px"> <input type="button" id="drawing-mode" class="btn" value="Cancel drawing mode"><br> <input type="button" id="clear-canvas" class="btn" value="clear" /> <input type="button" id="saveJson" class="btn" value="保存为JSON文件" /> <div id="drawing-mode-options"> <label for="drawing-mode-selector">Mode:</label> <select id="drawing-mode-selector"> <option>Pencil</option> <option>Circle</option> <option>Spray</option> <option>Pattern</option> <option>hline</option> <option>vline</option> <option>square</option> <option>diamond</option> <option>texture</option> </select><br> <label for="drawing-line-width">Line </label> <span class="info">5</span><input type="range" value="5" min="0" max="150" id="drawing-line-width"><br> <label for="drawing-color">Line color:</label> <input type="color" value="#F0321E" id="drawing-color"><br> <label for="drawing-shadow-color">Shadow color:</label> <input type="color" value="#F0F096" id="drawing-shadow-color"><br> <label for="drawing-shadow-width">Shadow </label> <span class="info">10</span><input type="range" value="10" min="0" max="50" id="drawing-shadow-width"><br> <label for="drawing-shadow-offset">Shadow offset:</label> <span class="info">2</span><input type="range" value="2" min="0" max="50" id="drawing-shadow-offset"><br> </div> </div> <br> <br> </div> </form> <script> (function() { var $ = function(id) { return document.getElementById(id) }; var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true }); fabric.Object.prototype.transparentCorners = false; var drawingModeEl = $('drawing-mode'), drawingOptionsEl = $('drawing-mode-options'), drawingColorEl = $('drawing-color'), drawingShadowColorEl = $('drawing-shadow-color'), drawingLineWidthEl = $('drawing-line-width'), drawingShadowWidth = $('drawing-shadow-width'), drawingShadowOffset = $('drawing-shadow-offset'), clearEl = $('clear-canvas'); clearEl.onclick = function() { canvas.clear() }; $("saveJson").onclick = function() { alert(JSON.stringify(canvas.toJSON())); }; drawingModeEl.onclick = function() { canvas.isDrawingMode = !canvas.isDrawingMode; if (canvas.isDrawingMode) { drawingModeEl.innerHTML = 'Cancel drawing mode'; drawingOptionsEl.style.display = ''; } else { drawingModeEl.innerHTML = 'Enter drawing mode'; drawingOptionsEl.style.display = 'none'; } }; if (fabric.PatternBrush) { var vLinePatternBrush = new fabric.PatternBrush(canvas); vLinePatternBrush.getPatternSrc = function() { var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = 10; var ctx = patternCanvas.getContext('2d'); ctx.strokeStyle = this.color; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(0, 5); ctx.lineTo(10, 5); ctx.closePath(); ctx.stroke(); return patternCanvas; }; var hLinePatternBrush = new fabric.PatternBrush(canvas); hLinePatternBrush.getPatternSrc = function() { var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = 10; var ctx = patternCanvas.getContext('2d'); ctx.strokeStyle = this.color; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(5, 0); ctx.lineTo(5, 10); ctx.closePath(); ctx.stroke(); return patternCanvas; }; var squarePatternBrush = new fabric.PatternBrush(canvas); squarePatternBrush.getPatternSrc = function() { var squareWidth = 10, squareDistance = 2; var patternCanvas = fabric.document.createElement('canvas'); patternCanvas.width = patternCanvas.height = squareWidth + squareDistance; var ctx = patternCanvas.getContext('2d'); ctx.fillStyle = this.color; ctx.fillRect(0, 0, squareWidth, squareWidth); return patternCanvas; }; var diamondPatternBrush = new fabric.PatternBrush(canvas); diamondPatternBrush.getPatternSrc = function() { var squareWidth = 10, squareDistance = 5; var patternCanvas = fabric.document.createElement('canvas'); var rect = new fabric.Rect({ squareWidth, height: squareWidth, angle: 45, fill: this.color }); var canvasWidth = rect.getBoundingRect().width; patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance; rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 }); var ctx = patternCanvas.getContext('2d'); rect.render(ctx); return patternCanvas; }; var img = new Image(); img.src = '/images/honey_im_subtle.png'; var texturePatternBrush = new fabric.PatternBrush(canvas); texturePatternBrush.source = img; } $('drawing-mode-selector').onchange = function() { if (this.value === 'hline') { canvas.freeDrawingBrush = vLinePatternBrush; } else if (this.value === 'vline') { canvas.freeDrawingBrush = hLinePatternBrush; } else if (this.value === 'square') { canvas.freeDrawingBrush = squarePatternBrush; } else if (this.value === 'diamond') { canvas.freeDrawingBrush = diamondPatternBrush; } else if (this.value === 'texture') { canvas.freeDrawingBrush = texturePatternBrush; } else { canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas); } if (canvas.freeDrawingBrush) { canvas.freeDrawingBrush.color = drawingColorEl.value; canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1; canvas.freeDrawingBrush.shadow = new fabric.Shadow({ blur: parseInt(drawingShadowWidth.value, 10) || 0, offsetX: 0, offsetY: 0, affectStroke: true, color: drawingShadowColorEl.value }); } }; drawingColorEl.onchange = function() { canvas.freeDrawingBrush.color = this.value; }; drawingShadowColorEl.onchange = function() { canvas.freeDrawingBrush.shadow.color = this.value; }; drawingLineWidthEl.onchange = function() { canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1; this.previousSibling.innerHTML = this.value; }; drawingShadowWidth.onchange = function() { canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0; this.previousSibling.innerHTML = this.value; }; drawingShadowOffset.onchange = function() { canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0; canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0; this.previousSibling.innerHTML = this.value; }; if (canvas.freeDrawingBrush) { canvas.freeDrawingBrush.color = drawingColorEl.value; canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1; canvas.freeDrawingBrush.shadow = new fabric.Shadow({ blur: parseInt(drawingShadowWidth.value, 10) || 0, offsetX: 0, offsetY: 0, affectStroke: true, color: drawingShadowColorEl.value }); } })(); </script> </body> </html>