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

8 posts, 0 answers
  1. Adrian
    Adrian avatar
    7 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 30 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adrian
    Adrian avatar
    7 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2012 Link to this post

    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
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 01 Aug 2012 Link to this post

    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.
  6. Adrian
    Adrian avatar
    7 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    Hi Dobromir,
    I could create a custom dialog that is similar to those. That is a good idea.
    Thanks for your help.
  7. Marbry
    Marbry avatar
    123 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2015 in reply to Dobromir Link to this post

    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.
  8. Marbry
    Marbry avatar
    123 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2015 Link to this post

    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();
    },

  9. Marbry
    Marbry avatar
    123 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2015 in reply to Marbry Link to this post

    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 });
    },
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017