定义1个canvas
<div>
<input type="color" value="#005E7A" id="drawing-color"><br>
<canvas id="c" width="500" height="500" style="border:1px solid #aaa"></canvas>
</div>
<script src="/static/fabric/fabric.js"></script>
<script src="/static/fabric/lib/event.js"></script>
<script>
$(document).ready(function () {
let canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
fabric.Object.prototype.transparentCorners = false;
canvas.freeDrawingBrush.color = '#005E7A';
$('#drawing-color').change(function () {
canvas.freeDrawingBrush.color = this.value;
console.log(this.value);
});
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
});
使用django的开发服务器,会报各种莫名其妙的错误,点击鼠标后,涂鸦线连续不断。
Uncaught TypeError: fabric.Rect is not a constructor
Uncaught TypeError: Cannot read property 'prototype' of undefined
at klass.initialize (fabric.js:13587)
at klass.initialize (fabric.js:2149)
at new klass (fabric.js:2214)
at klass.createPath (fabric.js:5978)
at klass._finalizeAndAddPath (fabric.js:6039)
at klass.onMouseUp (fabric.js:5848)
at klass._onMouseUpInDrawingMode (fabric.js:8876)
at klass.__onMouseUp (fabric.js:8677)
at klass._onMouseUp (fabric.js:8594)
切换到uwsgi+nginx则正常。