Is it possible to create a paper.js PointText obje

Question

I'm working on an image annotator that utilizes paper.js PointText objects for part of it. One thing we're looking into is allowing the user to highlight different parts of the text of a given PointText object with different colors and font sizes.

I saw the Gradient option on the paper.js website, but that would feel like more of a hack to get working, assuming it would work in the first place. Then I would have to get it to display properly in the textarea used for editing the PointText, which sounds even more hacky; I would like a cleaner solution.

Any solutions must allow the text to be draggable within the bounds of the canvas.

I don't have any code to show because I haven't found anything to try, but I wanted to see if the SO community is aware of any possible solutions.

Answer 1

I think text tools are still in development in Paper.js*, so I guess you have to create one PointText by color or use gradients as you suggested if you want to stick with Paper.js.

In my opinion you should really consider overlaying text on top of the canvas and handle styles with CSS. Here is an example:

html:

<canvas id="PaperCanvas"></canvas>
<div id="container">
  <div id="text" contenteditable='true'>
    Your text
  </div>
</div>

coffeescript:

  ### ... some paper.js code ...
  # drag & drop:
  $('#container').mousedown (event)->
    if event.target.id != "container"
      return
    global.drag = true
    global.delta = new Point( $('#container').offset().left  - event.pageX, $('#container').offset().top - event.pageY)
    $("#text").addClass("noselect")
    return

  $("html").mousemove (event)->
    if global.drag
      $('#container').css( left: event.pageX + global.delta.x, top: event.pageY + global.delta.y)
    return

  $("html").mouseup (event)->
    global.drag = false
    $("#text").removeClass("noselect")
    return

css:

canvas {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

#container {
  position: absolute;
  top: 50px;
  left: 50px;
  padding: 20px;
  border: 1px solid black;
  background-color: 'red';
}
#text {
  padding: 20px;
  background-color: 'white';
  border: 1px solid black;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

*http://paperjs.org/reference/textitem/

The TextItem type allows you to create typography. Its functionality is inherited by different text item types such as PointText, and AreaText (coming soon).

Edit

You can then use html-to-canvas or rasterizeHTML.js to convert your colored text into an image that you can paste onto the paper.js canvas at the correct location. (You can use Raster to import your image into paper.js)