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
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
0
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
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
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
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 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.
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
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.
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.
Then I changed onOpen to set the draggable text position initially to the center of the window.
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 });
},