{"id":104,"date":"2025-02-27T08:11:10","date_gmt":"2025-02-27T08:11:10","guid":{"rendered":"http:\/\/effecttrackertest.dk\/?page_id=104"},"modified":"2025-02-27T08:11:10","modified_gmt":"2025-02-27T08:11:10","slug":"canvas","status":"publish","type":"page","link":"http:\/\/effecttrackertest.dk\/index.php\/canvas\/","title":{"rendered":"Canvas"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>const canvas = new fabric.Canvas(canvasEl);\n\n\/\/ create a rect object\nconst deleteIcon =\n  \"data:image\/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-\/\/W3C\/\/DTD SVG 1.1\/\/EN' 'http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http:\/\/www.w3.org\/2000\/svg' xmlns:xlink='http:\/\/www.w3.org\/1999\/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'\/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'\/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'\/%3E%3C\/g%3E%3C\/svg%3E\";\n\nvar deleteImg = document.createElement('img');\ndeleteImg.src = deleteIcon;\n\nfabric.Object.prototype.transparentCorners = false;\nfabric.Object.prototype.cornerColor = 'blue';\nfabric.Object.prototype.cornerStyle = 'circle';\n\nfunction Add() {\n  const rect = new fabric.Rect({\n    left: 100,\n    top: 50,\n    fill: 'yellow',\n    width: 200,\n    height: 100,\n    objectCaching: false,\n    stroke: 'lightgreen',\n    strokeWidth: 4,\n  });\n\n  rect.controls.deleteControl = new fabric.Control({\n    x: 0.5,\n    y: -0.5,\n    offsetY: 16,\n    cursorStyle: 'pointer',\n    mouseUpHandler: deleteObject,\n    render: renderIcon,\n    cornerSize: 24,\n  });\n\n  canvas.add(rect);\n  canvas.setActiveObject(rect);\n}\n\ndocument.getElementById('add').onclick = () => Add();\n\nAdd();\n\nfunction deleteObject(_eventData, transform) {\n  const canvas = transform.target.canvas;\n  canvas.remove(transform.target);\n  canvas.requestRenderAll();\n}\n\nfunction renderIcon(ctx, left, top, _styleOverride, fabricObject) {\n  const size = this.cornerSize;\n  ctx.save();\n  ctx.translate(left, top);\n  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n  ctx.drawImage(deleteImg, -size \/ 2, -size \/ 2, size, size);\n  ctx.restore();\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-104","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/pages\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":2,"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/pages\/104\/revisions"}],"predecessor-version":[{"id":108,"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/pages\/104\/revisions\/108"}],"wp:attachment":[{"href":"http:\/\/effecttrackertest.dk\/index.php\/wp-json\/wp\/v2\/media?parent=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}