This is a migrated thread and some comments may be shown as answers.

Allowing user to specify x, y position for new image or text

7 Answers 539 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Adrian
Top achievements
Rank 1
Adrian asked on 25 Jul 2012, 06:27 PM
Hello,
I've got a basic project working that allows a user to "stamp" custom predefined text or statuses on an image. I have it now always adding the new text in the upper corner, but that may not be a good place for different images. Does anyone have any suggestions on a good way to allow the user to specify the position of the text before it is inserted. Ideally, I could allow them to drag it to the new location after I add the text, but from other posts, it doesn't appear that is possible.I'd like to avoid a custom popup dialog if I can, because right now, they just click a custom icon, and it stamps the predefined data.
Thanks,
Adrian

7 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 30 Jul 2012, 10:05 AM
Hi Adrian,

To insert text or image to image edited with RadImageEditor you need to use the controls corresponding client-side methods - addTextToImage() and insertImage. Both methods accept X and Y parameters declaring the position of the element to be added.

For your convenience I have attached sample page demonstrating their usage.

All the best,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Adrian
Top achievements
Rank 1
answered on 30 Jul 2012, 12:38 PM
Hi Dobromir,
Thanks for the response, and the sample code. I figured out how how to specify the position of the text or image, but that location might not always be good. Here's the part I need help with:

Does anyone have any suggestions on a good way to allow the user to specify the position of the text before it is inserted?

I'm really hoping to avoid using text boxes, because that won't be very user-friendly.
For example, if there was a click event that would give me the x and y coordinate, or something similar, that would be great.
Thanks,
Adrian
0
Dobromir
Telerik team
answered on 01 Aug 2012, 04:06 PM
Hi Adrian,

If I understand you correctly you want to visualize positioning of an image / text - if this is the case, the default RadImageEditor dialogs (Add Text and Insert Image) offer this functionality. Please take a look at the following live demos:
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/addtext/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customdialoginsertimage/defaultcs.aspx

If this is not the case, could you please describe in more detail what exactly you need to achieve?

Greetings,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Adrian
Top achievements
Rank 1
answered on 01 Aug 2012, 04:26 PM
Hi Dobromir,
I could create a custom dialog that is similar to those. That is a good idea.
Thanks for your help.
0
Marbry
Top achievements
Rank 1
answered on 27 Mar 2015, 10:01 PM
That doesn't help if the starting position isn't visible to the user.  Demonstrated from the demo you linked to in the attached screen shot.

If the user can't see it to drag to a new spot, that's going to be confusing.  I certainly wouldn't expect them to have to manually enter a pixel coordinate.

I'd think it should default to something like the middle of the visible portion of the image.  Looking at the AddText.ascx file for the default dialog, this appears to be the relevant section setting the starting pixel values of the text

_setDefaultValues: function ()
                {
                    var textSettings = this._getDefaultTextSettings();
                    this.set_fontSize(textSettings.get_fontSize());
 
                    this._colorPicker.set_selectedColor(textSettings.get_color());
                    var option = this._fontsDD.findItemByValue(textSettings.get_fontFamily());
                    if (option)
                        option.select();
 
                    textSettings.set_fontSize(parseInt(textSettings.get_fontSize() * this._getImageZoom()));
                    this._draggableText.set_textSettings(textSettings);
                    this._textArea.value = textSettings.get_text();
                    this.set_position({ x: 0, y: 0 });
                },


I'm not sure how we would get what the visible portion of the current image was in order to specify the pixel coordinates?  Also, I don't see anything that seems to be setting the coordinates of the text itself.  I tried changing the 0,0 coords specified above but there was no apparent change.
0
Marbry
Top achievements
Rank 1
answered on 27 Mar 2015, 10:51 PM
I hate having to hack this up, but I think I got this to work.

Changed _getScaledPosition so that it doesn't always generate coordinates of 0 when the zoomScale is 0.  Obviously if the zoomScale is 0 there it won't matter what coords you pass it, they will always be 0.

                 _getScaledPosition: function (pos, scale)
{
    var zoomScale = scale || 1 / this._getImageZoom();
    if (zoomScale == 0)
    {
        zoomScale = 1;
    }
 
    return { x: parseInt(pos.x * zoomScale), y: parseInt(pos.y * zoomScale) };
},

Then I changed onOpen to set the draggable text position initially to the center of the window.

                onOpen: function ()
{
    var viewport = $(this.get_imageEditor().get_viewport());
    this._draggableText.set_position({ x: viewport[0].clientWidth / 2, y: viewport[0].clientHeight / 2 });
    this._draggableText.show();
},

0
Marbry
Top achievements
Rank 1
answered on 27 Mar 2015, 11:14 PM
Also had to change _setDefaultValues since this is apparently what gets called the first time you open it, then onOpen is called subsequently.

                _setDefaultValues: function ()
{
    var textSettings = this._getDefaultTextSettings();
    this.set_fontSize(textSettings.get_fontSize());
 
    this._colorPicker.set_selectedColor(textSettings.get_color());
    var option = this._fontsDD.findItemByValue(textSettings.get_fontFamily());
    if (option)
        option.select();
 
    textSettings.set_fontSize(parseInt(textSettings.get_fontSize() * this._getImageZoom()));
    this._draggableText.set_textSettings(textSettings);
    this._textArea.value = textSettings.get_text();
 
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;
 
    this.set_position({ x: width / 2, y: height / 2 });
},
Tags
ImageEditor
Asked by
Adrian
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Adrian
Top achievements
Rank 1
Marbry
Top achievements
Rank 1
Share this question
or