paperjs pointtext onhover выберите и измените размер

Question

Я пытаюсь добавить текст на холсте, используя paperjs.Я могу создать текстовый текст на холсте, но нужно обрабатывать перетаскивание и изменение размера текста.

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';
            };

можно ли сделать как на экране ниже, используя paperjs.

Я не нашел нигде в Google.Подскажите пожалуйста как это сделать?

Answer 1

Это возможно (используя Item.scaling), но вам придется самостоятельно кодировать поле масштабирования (рисуя его обычными фигурами, взаимодействующими с событиями мыши и клавиатуры). Этот ручной масштабирующий ящик будет контролировать ваши свойства PointText.scaling и PointText.rotation.

Поле масштабирования не просто кодировать и не сложно, и я очень сожалею, что, как часто, это чрезвычайно частая проблема, которая пока не имеет стандартного решения (слишком много решений для реализации такого окна масштабирования ), и, насколько мне известно, пока нет хорошего фрагмента кода, на который можно было бы положиться.

Answer 2

Я обновил свой код. Я могу создавать текстовые сообщения и перетаскивать их в другое место на холсте. отметьте здесь

Но когда я дважды щелкаю, мне приходится редактировать текст.Как это сделать?

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;
                }