paperjs pointtext onhover select and resize

问题

I am trying to add pointtext on canvas using paperjs. i am able to create pointtext on canvas but need to handle drag and resize of text.

scope.drawText = function () {
               var pointTextLocation = new p.Point(100,100);
                var myText = new p.PointText(pointTextLocation);
                myText.fillColor = 'red';
                myText.fontSize= 25;
                myText.content = 'Sample Text';
            };

is it possible to do like below screen using paperjs.

I didn't find anywhere on google. Please suggest how to do this?

回答1:

It is possible (using Item.scaling) but you will have to code the scaling box yourself (by drawing it with regular shapes interacting with mouse and keyboard events). This hand made scaling box will control your PointText.scaling and PointText.rotation properties.

The scaling box is not simple to code, neither hard, and I am very sorry to notice that, as often, this is an extremely frequent problem which does not have a standard solution yet (too many solutions to implement such scaling box), and to my knowledge there are no good code snippet to rely on yet.

回答2:

i have updated my code.I am able to create pointtext and dragging anywhere else in canvas. check here

But when i double click i have to edit text. How to do it?

var pointTextLocation = new p.Point(x,y);

                var myText = new p.PointText(pointTextLocation);
                myText.fillColor = 'red';
                myText.fontSize= 25;
                myText.content = 'Sample Text';

                myText.onDoubleClick = function(event) {
                    this.fontSize= 50;
                }
                myText.onClick = function(event) {
                    if(this.selected){
                        this.selected= false;
                    }else{
                     this.selected= true;   
                    }

                }
                 myText.onMouseDrag = function(event) {
                    myText.position=event.point;
                }

来源：https://stackoverflow.com/questions/55509206/paperjs-pointtext-onhover-select-and-resize