javascript - FabricJS CurvedText object (extended) is not getting displayed on updating spacing and text properties -

-

i have updated fabric curvedtext extension because of our requirement different. want set auto spacing between characters covers full circle. got solutions after updating code in fabric curvedtext extension. while changing text of object (on keyup event of textbox), recalculate spacing , setting spacing , text via settext , set("spacing", val) properties. in situations, i can not see object on canvas i can see pointer of object on canvas mouse hover effect.

remove characters textbox in snippet , object hide after remove characters. same thing happens when add characters in textbox.

updated curved text extension.

var radius = 100;  var circum = math.floor(2 * math.pi * radius);  var spacing = 0;  var fontfamily = 'arial';  var fontsize = 30;    var text;  var lineheight = 1;  var topa = 100;  var left = 200;    var char = 0;  var textwidth = 0;    var obj;  var canvas, ctx;    $(document).ready(function () {        canvas = new fabric.canvas('c');      ctx = canvas.getcontext("2d");        text = $('#uppertext').val();        spacingoperation();        var uppertext = new fabric.curvedtext(text, {          radius: radius,          top: topa,          left: left,          fontfamily: fontfamily,          fontsize: fontsize,          lineheight: lineheight,          spacing: spacing,          originx: 'center',          hascontrols: true,          hasborders: true,          selectable: true,          textalign: 'center'      });      canvas.add(uppertext).renderall();          $('#uppertext').on('keyup', function () {          text = $('#uppertext').val();            setobjects();          if (spacingoperation())          {              setprops();              canvas.renderall();          }      });  });      function spacingoperation() {      textwidth = gettotaltextwidth();      spacing = 0;      textwidth = gettotaltextwidth();      var diff = math.ceil(circum - textwidth);      spacing = math.ceil(diff / char);      return true;  }    function gettotaltextwidth()  {      ctx.font = fontsize + 'px ' + fontfamily;      char = text.length;      txtwidth = math.ceil(ctx.measuretext(text).width + (spacing * char));      return txtwidth;  }    function setobjects() {      canvas.setactiveobject(canvas.item(0));      obj = canvas.getactiveobject();  }    function setprops() {      obj.set('spacing', spacing);      obj.settext(text);      obj.setcoords();  }
<!doctype html>  <html>    <head>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>      <script src="http://www.trimantra.com/demo/fabric.curvedtext_done.js"></script>    </head>    <body>      <div class="row">        <div class="row canvas-container" style="width: 50%; float: left;">          <canvas id="c" width="400" height="400" style="border:1px dotted #000;"></canvas>        </div>        <div class="row" style="float: left; width: 50%; height: 150px;">          upper text : <input type="text" id="uppertext" value="utxxxxxxxxxxxxxutxxxxxaaaaaaaawwwwwwwwwxxxxxxxxutxxxxxxxxxxxxxutxxxxxxxxxxxxx" />        </div>      </div>    </body>  </html>

i have looked code , changed 1 line in fabric curvedtext extension ctx = new fabric.canvas('c').getcontext('2d'); ctx = fabric.util.createcanvaselement().getcontext('2d'); , working fine.


Comments

Post a Comment

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook.
Read more

customize file_field button ruby on rails -

-
i'm trying rid of ugly button rails has default file upload. want add glyphicon <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %> this didn't work , have tried other things in different post saw on page, don't attach file. as suggested here bootstrap filestyle , can use bootstrap's filestyle style file upload buttons. step-1: add layout application.html.erb i have added bootstrap filestyle library cdn. should make sure have both jquery , boostrap loaded. <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script> step-2: add corresponding js file: $(":file").filestyle({input: false}); step-3: image_url file field follows: <%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
Read more

SoapUI on windows 10 - high DPI/4K scaling issue -

-
Image
soapui doesn't seem dpi-aware , displays small on high dpi screen (tiny text , buttons). other applications running fine (screen resolution 3840 x 2160). version : soapui 5.1.2 os : windows 10 i have tried: configure soapui run "disable display scaling on high dpi settings" - parts of soapui looking bigger , don't display (image) changing resolution changing font size (preferences > editor settings > select font...) therefore assume, soapui pretends dpi-aware, not scale itself. have same issue? this workaround until developers round making version dpi-aware. step 1: add registry key hkey_local_machine\software\microsoft\windows\currentversion\sidebyside\preferexternalmanifest (dword) 1 step 2: add manifest file 'soapui-5.2.1.exe.manifest' in same directory 'soapui-5.2.1.exe' content of manifest file: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <assembly xml
Read more