{"id":7326,"date":"2022-09-08T03:23:17","date_gmt":"2022-09-07T21:53:17","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/"},"modified":"2022-09-08T03:23:17","modified_gmt":"2022-09-07T21:53:17","slug":"solved-how-to-display-size-on-shape-after-scaled-using-fabric-js","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/","title":{"rendered":"[Solved] how to display size on shape after scaled using fabric js?"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-33672180\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"33672180\" data-parentid=\"33448823\" data-score=\"3\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>function updateMeasures(evt) {\r\n   var obj = evt.target;\r\n   if (obj.type != 'group') {\r\n   return;\r\n   }\r\n   var width = obj.getWidth();\r\n   var height = obj.getWidth();\r\n   obj._objects[1].text = width.toFixed(2) + 'px';\r\n   obj._objects[1].scaleX= 1 \/ obj.scaleX;\r\n   obj._objects[1].scaleY= 1 \/ obj.scaleY;\r\n   obj._objects[2].text = height.toFixed(2) + 'px';\r\n   obj._objects[2].scaleX= 1 \/ obj.scaleY;\r\n   obj._objects[2].scaleY= 1 \/ obj.scaleX;\r\n}\r\ncanvas = new fabric.Canvas('canvas');\r\nvar rect = new fabric.Rect({width: 100, height: 50, top:0, left: 0, fill:'blue', stroke: 'red'});\r\nvar text = new fabric.Text('W',{top: 4, left: 100, fontSize: 16, originX: 'right'});\r\nvar text2 = new fabric.Text('H',{top: 50, left: 0, fontSize: 16, originX: 'left', angle: -90});\r\nvar group = new fabric.Group([rect, text, text2], {strokeWidth:0});\r\ncanvas.add(group);\r\ncanvas.on(\"object:scaling\", updateMeasures);<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;script src=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fabric.js\/1.5.0\/fabric.min.js\"&gt;&lt;\/script&gt;\r\n&lt;canvas id='canvas' width=\"500\" height=\"400\" style=\"border:#000 1px solid;\"&gt;&lt;\/canvas&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<p>The idea behind this is basically to create a group, a rect and text objects as labels.<br \/>\nThis is a basic implementation and you should use it just as an hint to your particular solution. If you have to use it widely you should think of creating your own subclass to handle this.<br \/>\nThis particular implementation has to account for scaling factor in groups, and what are you really measuring is group dimension that is given mostly by the scaled rect.<br \/>\nThe width and height of rect stay at 100 and 50 but the group scale factor gives you a bigger visual dimension.<\/p>\n<p>Finally we are using the event &#8220;object:scaling&#8221; of canvas to run our update and unscaling of text whenever any object is scaled on canvas.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved how to display size on shape after scaled using fabric js? <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] function updateMeasures(evt) { var obj = evt.target; if (obj.type != &#8216;group&#8217;) { return; } var width = obj.getWidth(); var height = obj.getWidth(); obj._objects[1].text = width.toFixed(2) + &#8216;px&#8217;; obj._objects[1].scaleX= 1 \/ obj.scaleX; obj._objects[1].scaleY= 1 \/ obj.scaleY; obj._objects[2].text = height.toFixed(2) + &#8216;px&#8217;; obj._objects[2].scaleX= 1 \/ obj.scaleY; obj._objects[2].scaleY= 1 \/ obj.scaleX; } canvas = new fabric.Canvas(&#8216;canvas&#8217;); var &#8230; <a title=\"[Solved] how to display size on shape after scaled using fabric js?\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\" aria-label=\"More on [Solved] how to display size on shape after scaled using fabric js?\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1728,2039,333],"class_list":["post-7326","post","type-post","status-publish","format-standard","hentry","category-solved","tag-canvas","tag-fabricjs","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] how to display size on shape after scaled using fabric js? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] how to display size on shape after scaled using fabric js? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] function updateMeasures(evt) { var obj = evt.target; if (obj.type != &#039;group&#039;) { return; } var width = obj.getWidth(); var height = obj.getWidth(); obj._objects[1].text = width.toFixed(2) + &#039;px&#039;; obj._objects[1].scaleX= 1 \/ obj.scaleX; obj._objects[1].scaleY= 1 \/ obj.scaleY; obj._objects[2].text = height.toFixed(2) + &#039;px&#039;; obj._objects[2].scaleX= 1 \/ obj.scaleY; obj._objects[2].scaleY= 1 \/ obj.scaleX; } canvas = new fabric.Canvas(&#039;canvas&#039;); var ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-07T21:53:17+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] how to display size on shape after scaled using fabric js?\",\"datePublished\":\"2022-09-07T21:53:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\"},\"wordCount\":152,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"canvas\",\"fabricjs\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\",\"name\":\"[Solved] how to display size on shape after scaled using fabric js? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-07T21:53:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] how to display size on shape after scaled using fabric js?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] how to display size on shape after scaled using fabric js? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] how to display size on shape after scaled using fabric js? - JassWeb","og_description":"[ad_1] function updateMeasures(evt) { var obj = evt.target; if (obj.type != 'group') { return; } var width = obj.getWidth(); var height = obj.getWidth(); obj._objects[1].text = width.toFixed(2) + 'px'; obj._objects[1].scaleX= 1 \/ obj.scaleX; obj._objects[1].scaleY= 1 \/ obj.scaleY; obj._objects[2].text = height.toFixed(2) + 'px'; obj._objects[2].scaleX= 1 \/ obj.scaleY; obj._objects[2].scaleY= 1 \/ obj.scaleX; } canvas = new fabric.Canvas('canvas'); var ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/","og_site_name":"JassWeb","article_published_time":"2022-09-07T21:53:17+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] how to display size on shape after scaled using fabric js?","datePublished":"2022-09-07T21:53:17+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/"},"wordCount":152,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["canvas","fabricjs","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/","name":"[Solved] how to display size on shape after scaled using fabric js? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-07T21:53:17+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-display-size-on-shape-after-scaled-using-fabric-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] how to display size on shape after scaled using fabric js?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/7326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=7326"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/7326\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=7326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=7326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=7326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}