Monday, August 13, 2018

Add Mouse Events for Canvas Drawing

Hi,

I'm trying to add mouse handlers to images on the canvas but I can't do this. After drawing an image handler not working. What I really want to do is to put images on the canvas hexagonal map and to add handlers to all hexagons. Any help?
Of cause I can use canvas handler and handle mouse events by hex coordiantes but it seems too complicated. It becomes more complicated if I'm trying to drag&drop an image from one canvas to another...

    Context2d context;
    Image img = new Image(PATH_IMG);
   
    img.addLoadHandler(new LoadHandler() {
           
            @Override
            public void onLoad(LoadEvent event) {
               
                img.addMouseDownHandler(new MouseDownHandler() {
                   
                    @Override
                    public void onMouseDown(MouseDownEvent event) {
                        Window.alert("onClick");
                    }
                });
                context.drawImage(ImageElement.as(img.getElement()), 100, 50);

            }
        });
       
    public void drawContextImage(Context2d context, Image image, HexagonCoordinatesDTO coords) {
       
        image.addMouseDownHandler(new MouseDownHandler() {
                   
                    @Override
                    public void onMouseDown(MouseDownEvent event) {
                        Window.alert("onClick");
                    }
                });
        CanvasPattern pattern = context.createPattern((CanvasElement) CanvasElement.as(image.getElement()), "repeat");
        context.setFillStyle(pattern);

        context.beginPath();
       
        context.moveTo(coords.getPoint1(), coords.getPoint1_2());
        context.lineTo(coords.getPoint2(), coords.getPoint2_2());
        context.lineTo(coords.getPoint3(), coords.getPoint3_2());
        context.lineTo(coords.getPoint4(), coords.getPoint4_2());
        context.lineTo(coords.getPoint5(), coords.getPoint5_2());
        context.lineTo(coords.getPoint6(), coords.getPoint6_2());
        context.lineTo(coords.getPoint_end1(), coords.getPoint_end1_2());
        //context.clip();
       
        context.fill();
        context.closePath();
       
    }       

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment