[solved]imagerotateandresize

Community Driven Extensions Project
gerzeus
Posts: 2
Joined: 11 Oct 2012, 16:45

11 Oct 2012, 18:05

I find this example, but I have a problem. I have some images, I want to select anyone and just rotate it (NO REZISE).

Now I delete the part of

Code: Select all

<pe:imageAreaSelect />
and I can select an image and rotate it, but later I can't select another image.

If I keep the part of

Code: Select all

<pe:imageAreaSelect />
I can rotate and select another to do the same, but whit this part, when I drag the mouse in the image, some lines appears and I don't want this.

(Sorry for my english)

Code: Select all

<p:outputPanel id="example">
    <p:commandLink update="example">
        <f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage1.png" />
        <p:graphicImage value="/resources/images/testImage1.png" width="150" height="100"/>
    </p:commandLink>
    <p:commandLink update="example">
        <f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage2.png" />
        <p:graphicImage value="/resources/images/testImage2.png" width="150" height="100"/>
    </p:commandLink>
    <p:commandLink update="example">
        <f:setPropertyActionListener target="#{imageController.imageUrl}" value="/resources/images/testImage3.png" />
        <p:graphicImage value="/resources/images/testImage3.png" width="150" height="100"/>
    </p:commandLink>

    <p:growl id="growl" showDetail="true" sticky="true" />

    <div id="imageWrapper" style="width:600px; height:400px; margin:auto; overflow:scroll; position:relative;">
        <p:graphicImage id="myImage" value="#{imageController.imageUrl}" />
    </div>

    <pe:imageAreaSelect id="areaSelect"
        for="myImage"
        widgetVar="areaSelectWidget"
        autoHide="true"
        handles="false"
        movable="false"
        persistent="false"
        resizable="false"
        parentSelector="#imageWrapper">
        <p:ajax event="selectEnd" listener="#{imageController.selectEndListener}" update="growl"/>
    </pe:imageAreaSelect>

    <pe:imageRotateAndResize id="rotateAndResize" for="myImage" widgetVar="rotateAndResizeWidget">
        <p:ajax event="rotate" listener="#{imageController.rotateListener}"
                update="growl" oncomplete="areaSelectWidget.reload();"/>
        <pe:javascript event="resize" execute="areaSelectWidget.reload();"/>
    </pe:imageRotateAndResize>

    <p:commandButton icon="ui-icon-arrowreturnthick-1-w" value="Rotate Left"
        onclick="rotateAndResizeWidget.rotateLeft(90);return false;"/>
    <p:commandButton icon="ui-icon-arrowreturnthick-1-e" value="Rotate Right"
        onclick="rotateAndResizeWidget.rotateRight(90);return false;"/>
    <p:commandButton icon="ui-icon-zoomin" value="Scale +"
        onclick="rotateAndResizeWidget.scale(1.05);return false;"/>
    <p:commandButton icon="ui-icon-zoomout" value="Scale -"
        onclick="rotateAndResizeWidget.scale(0.95);return false;"/>
</p:outputPanel>
            

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

11 Oct 2012, 18:21

Sorry but i didn't understand. ImageRotateAndResize works fine also WITHOUT ImageAreaSelect.

If you update the image, just be sure that you call myResizeAndRotateWidgetVar.reload() with JS (like we reload myImageAreaSelect.reload() in oncomplete in the showcase)
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

gerzeus
Posts: 2
Joined: 11 Oct 2012, 16:45

12 Oct 2012, 00:31

Where should I call ResizeAndRotateWidgetVar.reload() ?

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

12 Oct 2012, 09:19

if you update the image with a commandButton, use oncomplete on this commandButton.
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests