Add Delete button on element in Canvas Fabric JS<\/a><\/li>\n<\/ul>\n![\"image-346\"](\"http:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/11\/Image-346-286x300.png\")
<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title><\/title>\r\n <script src=\"..\/js\/jquery-2.2.4.min.js\"><\/script>\r\n <script src=\"..\/js\/fabric.min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<canvas id=\"c\" style=\"border: 1px solid #999;\"><\/canvas>\r\n\r\n<button onclick=\"addText()\">\u589e\u52a0\u6587\u5b57<\/button>\r\n<button onclick=\"addBlock()\">\u589e\u52a0\u65b9\u6846<\/button>\r\n<button onclick=\"addLine2()\">\u589e\u52a0\u7bad\u982d<\/button>\r\n<button onclick=\"saveImage()\">\u5132\u5b58<\/button>\r\n\r\n<script>\r\n var canvas = new fabric.Canvas('c');\r\n\r\n var HideControls = {\r\n 'tl':true,\r\n 'tr':false,\r\n 'bl':true,\r\n 'br':true,\r\n 'ml':true,\r\n 'mt':true,\r\n 'mr':true,\r\n 'mb':true,\r\n 'mtr':true\r\n };\r\n\r\n var image = new Image();\r\n image.src = 'normal_3206.png';\r\n image.onload = function() {\r\n\r\n \/\/ create a wrapper around native canvas element (with id=\"c\")\r\n canvas.setHeight(image.width).setWidth(image.height);\r\n\r\n canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {\r\n width: canvas.width,\r\n height: canvas.height,\r\n \/\/ Needed to position backgroundImage at 0\/0\r\n originX: 'left',\r\n originY: 'top'\r\n });\r\n };\r\n\r\n canvas.renderAll();\r\n\r\n function addDeleteBtn(x, y){\r\n $(\".deleteBtn\").remove();\r\n var btnLeft = x-10;\r\n var btnTop = y-10;\r\n var deleteBtn = '<img src=\"..\/images\/delete-icon.png\" class=\"deleteBtn\" style=\"position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;\"\/>';\r\n $(\".canvas-container\").append(deleteBtn);\r\n }\r\n\r\n canvas.on('object:selected',function(e){\r\n addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);\r\n });\r\n\r\n canvas.on('mouse:down',function(e){\r\n if(!canvas.getActiveObject())\r\n {\r\n $(\".deleteBtn\").remove();\r\n }\r\n });\r\n\r\n canvas.on('object:modified',function(e){\r\n addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);\r\n });\r\n\r\n canvas.on('object:scaling',function(e){\r\n $(\".deleteBtn\").remove();\r\n });\r\n canvas.on('object:moving',function(e){\r\n $(\".deleteBtn\").remove();\r\n });\r\n canvas.on('object:rotating',function(e){\r\n $(\".deleteBtn\").remove();\r\n });\r\n $(document).on('click',\".deleteBtn\",function(){\r\n if(canvas.getActiveObject())\r\n {\r\n canvas.remove(canvas.getActiveObject());\r\n $(\".deleteBtn\").remove();\r\n }\r\n });\r\n\r\n \/\/ ----------------------------------------\r\n\r\n function addBlock(){\r\n var rect = new fabric.Rect({\r\n stroke: 'rgb(255,0,0)',\r\n strokeWidth: 3,\r\n width: 100, height: 40,\r\n fill: false, left: 50, top: 50\r\n }).setControlsVisibility(HideControls);\r\n\r\n canvas.add(rect);\r\n }\r\n\r\n function addText() {\r\n var t = new fabric.IText('Tap and Type', {\r\n fontFamily: 'arial black',\r\n left: 100,\r\n top: 100\r\n });\r\n\r\n var textWithBackground = new fabric.IText('\u8f38\u5165\u6587\u5b57', {\r\n left: 50,\r\n top: 50,\r\n textBackgroundColor: 'rgb(255,255,255)'\r\n }).setControlsVisibility(HideControls);\r\n canvas.add(textWithBackground);\r\n }\r\n\r\n function addLine2(){\r\n var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {\r\n stroke: 'rgb(255,255,255)',\r\n strokeWidth: 8,\r\n fill: 'rgb(255,0,0)'\r\n }\r\n ).scaleToWidth(100).setControlsVisibility(HideControls);\r\n\r\n canvas.add(path);\r\n }\r\n\r\n \/\/ \u9001\u51fa\u8655\u7406\u5f8c\u5716\u50cf\u7d66 PHP\r\n function saveImage() {\r\n request = new XMLHttpRequest();\r\n request.open('POST', 'c1.php', true);\r\n\r\n var $Json = {};\r\n $Json['image'] = canvas.toDataURL();\r\n $Json['id'] = 'aa111';\r\n request.send( JSON.stringify($Json) );\r\n }\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n <\/p>\n
--<\/p>\n
<\/div>\n
![\"image-344\"](\"http:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/11\/Image-344-300x195.png\")
![\"image-343\"](\"http:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/11\/Image-343-300x156.png\")
![\"\"](\"http:\/\/canvasjs.com\/wp-content\/uploads\/2012\/10\/CanvasJS-HTML5-&-JavaScript-Charts.png\")
![\"image-345\"](\"http:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2016\/11\/Image-345-300x146.png\")