Paper.js: Gradients within PointText

Created on 14 Jan 2017  路  5Comments  路  Source: paperjs/paper.js

I've been working a lot with Gradients in all sorts of Items and I had a lot of trouble getting them to display correctly with PointText. It appears that with PointText exclusively the position of the element must be subtracted from the provided bounds, here is the snippet I now have in my code that seems to be solving the issue:

    //property is always 'fillColor' or 'strokeColor'
    if(path._class === 'PointText'){
      path[property].setOrigin(path[property].origin.subtract(path.position));
      path[property].setDestination(path[property].destination.subtract(path.position));
    }

here is a standalone test that I ran on the Gradient reference page. Notice that if you don't include the subtraction it will be wrong and as you move the position of the PointText around it will map to different areas of the Gradient:

// Create a rectangle shaped path between
// the topLeft and bottomRight points:
var path = new paper.PointText({
    content: "abcdefghijklmnop",
    justification: 'left',
    position: new paper.Point(50, 40),
    fontSize: 48
});
var fillColor = {
    gradient: {
        stops: ['yellow', 'red', 'blue']
    },
    origin: path.bounds.topCenter.subtract(path.position),
    destination: path.bounds.bottomCenter.subtract(path.position)
}

path.fillColor = fillColor;

If I am doing something wrong please let me know. Thanks for all of your hard work, Paper.js is really great!

canvas-rendering bug

Most helpful comment

The reason is that these shapes / text items are always drawn at 0, 0, but the matrix moves them to the given position.

All 5 comments

it may be cause by the same factor as in #1250
"i narrowed down the issue to text.applyMatrix = True not having any effect compared to text.applyMatrix = False, so the original matrix created is never updated."

ok, i see that it is intentionaly disabled or not implemented in https://github.com/paperjs/paper.js/blob/6e7fe67a8ddc93d41b620ef8f02a503d2920769b/src/text/TextItem.js#L26
Is there a particular reason on why this is the case ?

@dexterial as explained in the other issue: applyMatrix = true only makes sense on items where transformations can be baked into content, so Path, CompoundPath, Group and Layer. All other items need to store the transformations in the matrix and cannot pass them on to the content.

But the observation is correct: The problem occurs with all these items, e.g.:

Sketch with Shape

The reason is that these shapes / text items are always drawn at 0, 0, but the matrix moves them to the given position.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

9oelM picture 9oelM  路  5Comments

przyb picture przyb  路  5Comments

s-light picture s-light  路  7Comments

sansumbrella picture sansumbrella  路  3Comments

arel picture arel  路  3Comments