@wise-community/drawing-tool
Version:
HTML5 Drawing Tool
31 lines (30 loc) • 8.87 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Drawing Tool Demo</title>
<style type="text/css">
body {
font-family: Arial;
}
</style>
</head>
<body>
<div class="container">
<div id="drawing-tool"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<link type="text/css" rel="stylesheet" href="../drawing-tool.css" />
<script src="../drawing-tool.js"></script>
<script>
var drawingTool = new DrawingTool("#drawing-tool", {
parseSVG: true,
buttons: [],
canvasScale: 0.5
});
var state = '{"version":1,"dt":{"width":800,"height":603},"canvas":{"version":"3.6.3","objects":[{"type":"rect","version":"3.6.3","originX":"center","originY":"center","left":400.5,"top":301.5,"width":793,"height":596,"fill":"#008a00","stroke":"#3f3f3f","strokeWidth":8,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0,"lockUniScaling":false,"objectCaching":false},{"type":"path","version":"3.6.3","originX":"left","originY":"top","left":257,"top":130.5,"width":112,"height":116.83,"fill":"#008a00","stroke":"#fff","strokeWidth":8,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockUniScaling":false,"objectCaching":false,"path":[["M",289.008,140.5],["Q",289,140.5,288.5,140.5],["Q",288,140.5,287.5,140.5],["Q",287,140.5,286.5,140.5],["Q",286,140.5,285,140.5],["Q",284,140.5,282.5,140.5],["Q",281,140.5,280,140.5],["Q",279,140.5,278,140.5],["Q",277,140.5,276,141],["Q",275,141.5,273,143],["Q",271,144.5,269.5,146.5],["Q",268,148.5,267,150],["Q",266,151.5,265.5,153],["Q",265,154.5,264,157],["Q",263,159.5,262,163],["Q",261,166.5,261,169.5],["Q",261,172.5,261,175],["Q",261,177.5,261,179.5],["Q",261,181.5,261,184.5],["Q",261,187.5,261,191.5],["Q",261,195.5,261,200],["Q",261,204.5,261,206],["Q",261,207.5,261.5,210.5],["Q",262,213.5,263,216],["Q",264,218.5,266.5,222.5],["Q",269,226.5,272,230],["Q",275,233.5,278,235.5],["Q",281,237.5,284.5,240],["Q",288,242.5,291.5,244],["Q",295,245.5,299,247],["Q",303,248.5,308,249.5],["Q",313,250.5,318.5,250.5],["Q",324,250.5,329,251],["Q",334,251.5,339,250.5],["Q",344,249.5,348.5,247.5],["Q",353,245.5,357,242],["Q",361,238.5,363.5,234.5],["Q",366,230.5,368,226.5],["Q",370,222.5,370.5,219.5],["Q",371,216.5,371.5,212.5],["Q",372,208.5,372.5,204.5],["Q",373,200.5,373,196.5],["Q",373,192.5,373,188.5],["Q",373,184.5,373,180.5],["Q",373,176.5,372,173.5],["Q",371,170.5,370,167.5],["Q",369,164.5,368,162],["Q",367,159.5,365,157.5],["Q",363,155.5,361.5,153.5],["Q",360,151.5,358,149.5],["Q",356,147.5,353.5,146],["Q",351,144.5,349,143],["Q",347,141.5,345,140.5],["Q",343,139.5,340.5,139],["Q",338,138.5,336.5,138],["Q",335,137.5,333.5,137],["Q",332,136.5,331,136],["Q",330,135.5,328.5,135.5],["Q",327,135.5,326,135],["Q",325,134.5,324,134.5],["Q",323,134.5,322.5,134.5],["L",321.992,134.5]]},{"type":"path","version":"3.6.3","originX":"left","originY":"top","left":458,"top":132.5,"width":128,"height":102,"fill":"#008a00","stroke":"#fff","strokeWidth":8,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockUniScaling":false,"objectCaching":false,"path":[["M",537.008,150.5],["Q",537,150.5,536.5,150.5],["Q",536,150.5,534.5,150.5],["Q",533,150.5,531,150.5],["Q",529,150.5,526.5,150.5],["Q",524,150.5,521.5,150.5],["Q",519,150.5,516,150.5],["Q",513,150.5,510,150.5],["Q",507,150.5,503.5,150.5],["Q",500,150.5,497,150.5],["Q",494,150.5,491.5,150.5],["Q",489,150.5,486,151.5],["Q",483,152.5,480.5,153.5],["Q",478,154.5,476,156],["Q",474,157.5,472,159],["Q",470,160.5,468.5,162],["Q",467,163.5,465.5,166],["Q",464,168.5,463.5,171],["Q",463,173.5,462.5,176],["Q",462,178.5,462,181],["Q",462,183.5,462,186.5],["Q",462,189.5,462,192.5],["Q",462,195.5,462.5,198.5],["Q",463,201.5,463.5,204.5],["Q",464,207.5,464.5,210.5],["Q",465,213.5,466,216],["Q",467,218.5,468.5,220.5],["Q",470,222.5,471,224.5],["Q",472,226.5,474,228.5],["Q",476,230.5,478,232],["Q",480,233.5,482,234.5],["Q",484,235.5,486.5,236],["Q",489,236.5,492,237.5],["Q",495,238.5,498.5,238.5],["Q",502,238.5,505,238.5],["Q",508,238.5,512,238],["Q",516,237.5,520,236.5],["Q",524,235.5,528.5,233],["Q",533,230.5,534.5,230],["Q",536,229.5,539,227.5],["Q",542,225.5,544.5,224],["Q",547,222.5,549.5,221.5],["Q",552,220.5,554,219],["Q",556,217.5,558,216.5],["Q",560,215.5,562,214],["Q",564,212.5,566,211],["Q",568,209.5,570,208],["Q",572,206.5,574,205],["Q",576,203.5,577.5,201],["Q",579,198.5,581,196],["Q",583,193.5,584,191.5],["Q",585,189.5,586,187.5],["Q",587,185.5,587.5,183],["Q",588,180.5,588.5,178.5],["Q",589,176.5,589.5,174.5],["Q",590,172.5,590,170],["Q",590,167.5,590,165.5],["Q",590,163.5,589,161.5],["Q",588,159.5,587,157],["Q",586,154.5,584.5,152.5],["Q",583,150.5,581.5,149],["Q",580,147.5,578,146],["Q",576,144.5,574.5,143.5],["Q",573,142.5,571.5,141.5],["Q",570,140.5,568,139.5],["Q",566,138.5,564.5,137.5],["Q",563,136.5,561.5,136.5],["Q",560,136.5,558,136.5],["Q",556,136.5,554.5,136.5],["Q",553,136.5,551.5,136.5],["Q",550,136.5,549,136.5],["Q",548,136.5,546.5,137],["Q",545,137.5,544,138],["Q",543,138.5,542,139.5],["L",540.992,140.508]]},{"type":"path","version":"3.6.3","originX":"left","originY":"top","left":242.99,"top":330.49,"width":351.02,"height":80.01,"fill":"#008a00","stroke":"#fff","strokeWidth":8,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockUniScaling":false,"objectCaching":false,"path":[["M",246.992,334.492],["Q",247,334.5,247,335],["Q",247,335.5,247.5,336.5],["Q",248,337.5,249.5,339],["Q",251,340.5,252.5,342.5],["Q",254,344.5,256,347],["Q",258,349.5,261,352.5],["Q",264,355.5,267,358.5],["Q",270,361.5,273.5,364.5],["Q",277,367.5,280.5,370],["Q",284,372.5,288,376],["Q",292,379.5,296.5,382.5],["Q",301,385.5,305.5,388],["Q",310,390.5,313,392.5],["Q",316,394.5,319,396],["Q",322,397.5,325.5,399],["Q",329,400.5,333.5,402.5],["Q",338,404.5,343.5,406],["Q",349,407.5,353,408.5],["Q",357,409.5,360.5,410],["Q",364,410.5,369.5,411],["Q",375,411.5,381,412],["Q",387,412.5,392.5,412.5],["Q",398,412.5,402.5,413],["Q",407,413.5,412,414],["Q",417,414.5,421.5,414.5],["Q",426,414.5,430.5,414.5],["Q",435,414.5,441,414.5],["Q",447,414.5,453.5,414.5],["Q",460,414.5,464.5,414.5],["Q",469,414.5,472.5,414.5],["Q",476,414.5,480.5,414.5],["Q",485,414.5,488.5,414.5],["Q",492,414.5,495.5,413.5],["Q",499,412.5,502.5,411.5],["Q",506,410.5,509.5,409],["Q",513,407.5,516,406],["Q",519,404.5,522,403],["Q",525,401.5,528,400],["Q",531,398.5,534.5,396.5],["Q",538,394.5,539,393.5],["Q",540,392.5,542.5,391],["Q",545,389.5,547,387.5],["Q",549,385.5,551,384],["Q",553,382.5,555,380.5],["Q",557,378.5,559,376.5],["Q",561,374.5,563.5,372.5],["Q",566,370.5,568,368.5],["Q",570,366.5,572,365],["Q",574,363.5,575.5,361.5],["Q",577,359.5,578.5,358.5],["Q",580,357.5,581,356.5],["Q",582,355.5,583,354.5],["Q",584,353.5,585,352.5],["Q",586,351.5,586.5,351],["Q",587,350.5,587.5,350],["Q",588,349.5,588.5,349],["Q",589,348.5,589.5,348],["Q",590,347.5,590.5,347],["Q",591,346.5,591,346],["Q",591,345.5,591,345],["Q",591,344.5,591,344],["Q",591,343.5,591.5,343.5],["Q",592,343.5,592,343],["Q",592,342.5,592,342],["Q",592,341.5,592.5,341.5],["Q",593,341.5,593.5,341],["Q",594,340.5,594,340],["Q",594,339.5,594.5,339],["Q",595,338.5,595.5,338.5],["Q",596,338.5,596,338],["Q",596,337.5,596,337],["Q",596,336.5,596.5,336.5],["Q",597,336.5,597,336],["Q",597,335.5,597,335],["Q",597,334.5,597.5,334.5],["L",598.008,334.5]]}],"background":"#fff"}}';
drawingTool.load(state);
</script>
</body>
</html>