javascript - How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc...) -


i want edit highlighted characters in text in canvas using fabric.js, change color, font, style etc.

just http://fabricjs.com/test/misc/itext.html

to @user43250937 hey uhm. tried , works! :d thanks. tried underline, bold, italic, have problem changing color of text, tried :

// "cinput" id of color picker.   addhandler('cinput', function(obj) {     var color =  $("#cinput").val();      var iscolor = (getstyle(obj, 'fill') || '').indexof(color) > -1;       setstyle(obj, 'fill', iscolor ? '' : color);  });

usually answers without description of tried , didn't work ignored here, i'm answering time because fabricjs library quite complex , documentation bit lacking sometimes...

that page has samples itext object, text can edited in place (the content of basic fabricjs text object can modified outside via javascript).

building static itext object different styles applied it's simple:

html:

<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>

javascript:

var canvas=new fabric.canvas('canv');  var itextsample = new fabric.itext('hello\nworld', {   left: 50,   top: 50,   fontfamily: 'helvetica',   fill: '#333',   lineheight: 1.1,   styles: {     0: {       0: { textdecoration: 'underline', fontsize: 80 },       1: { textbackgroundcolor: 'red' }     },     1: {       0: { textbackgroundcolor: 'rgba(0,255,0,0.5)' },       4: { fontsize: 20 }     }   } });  canvas.add(itextsample);

link jsfiddle

as can see specify style every character of each each line (first hello line, world line).

if want dynamic ability select text , change appearance/style there work do, you'll need to:

  1. add button or clickable element each style (bold,italic,change color, change background,etc...) want apply dynamically;
  2. add click listener each button code changes style of selected text inside itext.

you'll need basic function add handlers reuse every style button:

function addhandler(id, fn, eventname) {   document.getelementbyid(id)[eventname || 'onclick'] = function() {     var el = this;     if (obj = canvas.getactiveobject()) {       fn.call(el, obj);       canvas.renderall();     }   }; }

and helper functions change styles:

function setstyle(object, stylename, value) {   if (object.setselectionstyles && object.isediting) {     var style = { };     style[stylename] = value;     object.setselectionstyles(style);   }   else {     object[stylename] = value;   } }  function getstyle(object, stylename) {   return (object.getselectionstyles && object.isediting)     ? object.getselectionstyles()[stylename]     : object[stylename]; }   addhandler('underline', function(obj) {   var isunderline = (getstyle(obj, 'textdecoration') || '').indexof('underline') > -1;   setstyle(obj, 'textdecoration', isunderline ? '' : 'underline'); });

link working jsfiddle working underline button.

a bit of coding involved can see, it's not complex, full list of available style options can check fabricjs documentation.


Comments

Post a Comment

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

i have 1 application using @manytomany annotation link 2 different entities 1 parent entity. not sure if have implemented properly. when execute .findone() on parent entity's repository find it, @ first fetch data along executing delete queries internally delete record mapping table (a table jpa creates after adding @manytomany annotation.). following generated sql queries , code snippet: java class @entity @table(name = "inventory") public class inventory { @id long id; // many other properties @manytomany(fetch=fetchtype.lazy) private list<stream> streams; @manytomany(fetch=fetchtype.lazy) private list<subject> subjects; } there no other annotation i've put in stream , subject entity class link inventory class. when run app, create following tables: inventory stream subject inventory_stream inventory_subject (inventory_stream , inventory_subject, 2 tables created automatically, don't k...
Read more

python - Mongodb How to add addtional information when aggregating? -

i beginner , wrote line pipeline works, wanna add other information output, screen name , or number of tweets.i tried add under $group gave me syntax error everytime here pipeline: def make_pipeline(): # complete aggregation pipeline pipeline = [ { '$match': { "user.statuses_count": {"$gt":99 }, "user.time_zone": "brasilia" } }, { "$group": { "_id": "$user.id", "followers": { "$max": "$user.followers_count" } } }, { "$sort": { "followers": -1 } }, { "$limit" : 1 } ]; i using on example : { "_id" : objectid("5304e2e3cc9e684aa98bef97"), "text" : "first week of school on :p", "in_reply_to_status_id" : null, "retweet_count" : null, ...
Read more

java - Incorrect order of records in M-M relationship in hibernate -

Image
i have 4 records in bridge table in mysql database. using @manytomany in hibernate, accurate order of employees incorrect incorrect of projects. following required material figure out doing mistake. this source. @entity @table(name="project") public class projectbean { @id @generatedvalue @column(name="project_id") private int projectid; @column(name="title") private string projecttitle; @manytomany(mappedby="projects") private collection<employeebean> employees; public projectbean() { employees = new arraylist<employeebean>(); } //getters & setters } @entity @table(name="employee") public class employeebean { @id @generatedvalue @column(name="employee_id") private int employee_id; @column(name="first_name") private string ...
Read more