Example usage for com.google.gwt.canvas.dom.client Context2d scale

List of usage examples for com.google.gwt.canvas.dom.client Context2d scale

Introduction

In this page you can find the example usage for com.google.gwt.canvas.dom.client Context2d scale.

Prototype

public final native void scale(double x, double y) ;

Source Link

Document

Applies scale to the current transform.

Usage

From source file:com.google.gwt.sample.userwatcher.client.ImageUtils.java

public static ImageData scaleAndCropImage(Image image, double scaleToRatio, double sx, double sy, double sw,
        double sh) {

    Canvas canvasTmp = Canvas.createIfSupported();
    //RootPanel.get().add(canvasTmp);
    Context2d context = canvasTmp.getContext2d();

    double ch = (image.getHeight() * scaleToRatio) + 100;
    double cw = (image.getWidth() * scaleToRatio) + 100;

    canvasTmp.setCoordinateSpaceHeight((int) ch);
    canvasTmp.setCoordinateSpaceWidth((int) cw);

    ImageElement imageElement = ImageElement.as(image.getElement());

    // tell it to scale image
    context.scale(scaleToRatio, scaleToRatio);

    // draw image to canvas
    // s = source
    // d = destination     
    double dx = 0;
    double dy = 0;
    context.drawImage(imageElement, dx, dy);

    // get image data - if you go greater than the scaled image nothing will show up
    ImageData imageData = context.getImageData(sx, sy, sw, sh);

    return imageData;
}

From source file:com.google.gwt.sample.userwatcher.client.ImageUtils.java

/**
 * image - an ImageElement object//from w w w  . j  av  a2  s.  com
 * 
  sx - the x coordinate of the upper-left corner of the source rectangle
  sy - the y coordinate of the upper-left corner of the source rectangle
  sw - the width of the source rectangle
  sh - the width of the source rectangle
  dx - the x coordinate of the upper-left corner of the destination rectangle
  dy - the y coordinate of the upper-left corner of the destination rectangle
  dw - the width of the destination rectangle
  dh - the height of the destination rectangle
        
 */
public static ImageData scaleImage(Image image, double scaleToRatio) {

    //System.out.println("PanoTiler.scaleImag()e: scaleToRatio=" + scaleToRatio + " width=" + width + " x height=" + height);

    Canvas canvasTmp = Canvas.createIfSupported();
    Context2d context = canvasTmp.getContext2d();

    double ch = (image.getHeight() * scaleToRatio) + 100; // 100 is offset so it doesn't throw
    double cw = (image.getWidth() * scaleToRatio) + 100;

    canvasTmp.setCoordinateSpaceHeight((int) ch);
    canvasTmp.setCoordinateSpaceWidth((int) cw);

    ImageElement imageElement = ImageElement.as(image.getElement());

    // s = source
    // d = destination 
    double sx = 0;
    double sy = 0;
    double sw = imageElement.getWidth();
    double sh = imageElement.getHeight();

    double dx = 0;
    double dy = 0;
    double dw = imageElement.getWidth();
    double dh = imageElement.getHeight();

    // tell it to scale image
    context.scale(scaleToRatio, scaleToRatio);

    // draw image to canvas
    context.drawImage(imageElement, sx, sy, sw, sh, dx, dy, dw, dh);

    // get image data
    double w = dw * scaleToRatio;
    double h = dh * scaleToRatio;
    ImageData imageData = context.getImageData(0, 0, w, h); // this won't get the extra 100

    return imageData;
}

From source file:com.philbeaudoin.quebec.client.scene.Sprite.java

License:Apache License

@Override
public void drawUntransformed(double time, Context2d context) {
    if (info == null || info.getElement() == null) {
        logger.log(Level.SEVERE, "Trying to draw a sprite with null image element.");
    }//  w w w .  j  a  v  a2 s .  c o m
    double sizeFactor = info.getSizeFactor();
    ImageElement imageElement = info.getElement();
    context.scale(sizeFactor, sizeFactor);
    context.drawImage(imageElement, -info.getWidth() / 2, -info.getHeight() / 2);
}

From source file:com.philbeaudoin.quebec.client.scene.Text.java

License:Apache License

@Override
public void drawUntransformed(double time, Context2d context) {
    context.scale(0.001, 0.001);
    context.setFont("25px arial");
    context.fillText(text, 0, 0);//from  w w w .  j  a  va  2 s .c o m
}

From source file:com.philbeaudoin.quebec.shared.utils.ArcTransform.java

License:Apache License

@Override
public void applies(double time, Context2d context) {
    Vector2d translation = getTranslation(time);
    double scaling = getScaling(time);
    context.translate(translation.x, translation.y);
    context.scale(scaling, scaling);
    context.rotate(getRotation(time));//w w  w  .jav a  2 s .  c  om
}

From source file:com.philbeaudoin.quebec.shared.utils.ConstantTransform.java

License:Apache License

@Override
public void applies(double time, Context2d context) {
    context.translate(translation.x, translation.y);
    context.scale(scaling, scaling);
    context.rotate(rotation);//from  ww w  .  j a v  a  2s .c  om
}

From source file:com.sencha.gxt.chart.client.draw.engine.Canvas2d.java

License:sencha.com license

/**
 * In the Canvas2d class, this method does more or less what renderSprite does in SVG and VML - it
 * actually renders the sprite to the dom.
 * @param sprite the sprite to draw/*from  w  w  w .j av  a2s  .  co  m*/
 */
protected void append(Sprite sprite) {
    if (sprite.isHidden() || sprite.getOpacity() == 0) {
        return;
    }
    Context2d ctx = getContext();
    ctx.save();
    //set global stuff, fill, stroke, clip, etc

    //clip - deal with translation or normal rectangle
    if (sprite.getClipRectangle() != null) {
        PreciseRectangle clip = sprite.getClipRectangle();
        if (sprite.getScaling() != null || sprite.getTranslation() != null || sprite.getRotation() != null) {
            PathSprite transPath = new PathSprite(new RectangleSprite(clip));
            transPath = transPath.map(sprite.transformMatrix());
            appendPath(ctx, transPath);
        } else {
            ctx.beginPath();
            ctx.rect(clip.getX(), clip.getY(), clip.getWidth(), clip.getHeight());
            ctx.closePath();
        }
        ctx.clip();
    }

    if (sprite.getScaling() != null || sprite.getTranslation() != null || sprite.getRotation() != null
            || (component.isViewBox() && viewbox != null)) {
        Matrix matrix = sprite.transformMatrix();
        if (matrix != null) {
            //TODO consider replacing this transform call with three distinct calls to translate/scale/rotate if cheaper
            ctx.transform(matrix.get(0, 0), matrix.get(1, 0), matrix.get(0, 1), matrix.get(1, 1),
                    matrix.get(0, 2), matrix.get(1, 2));
        }
        if (component.isViewBox() && viewbox != null) {
            double size = Math.min(getWidth() / viewbox.getWidth(), getHeight() / viewbox.getHeight());

            ctx.scale(size, size);
            ctx.translate(-viewbox.getX(), -viewbox.getY());
        }
    }

    //TODO see about caching colors via the dirty flag? If we don't use a color/gradient for a pass or three, dump it
    double opacity = Double.isNaN(sprite.getOpacity()) ? 1.0 : sprite.getOpacity();
    PreciseRectangle untransformedBbox = sprite.getPathSprite().dimensions();
    if (sprite.getStroke() != null && sprite.getStroke() != Color.NONE && sprite.getStrokeWidth() != 0) {
        ctx.setLineWidth(Double.isNaN(sprite.getStrokeWidth()) ? 1.0 : sprite.getStrokeWidth());
        ctx.setStrokeStyle(getColor(sprite.getStroke(), untransformedBbox));//TODO read bbox from cache
    }
    if (sprite.getFill() != null && sprite.getFill() != Color.NONE) {
        ctx.setFillStyle(getColor(sprite.getFill(), untransformedBbox));//TODO read bbox from cache
    }

    if (sprite instanceof PathSprite) {
        appendPath(ctx, (PathSprite) sprite);
    } else if (sprite instanceof TextSprite) {
        TextSprite text = (TextSprite) sprite;
        //TODO style and weight
        ctx.setFont(text.getFontSize() + "px " + text.getFont());
        ctx.setTextAlign(getTextAlign(text.getTextAnchor()));
        ctx.setTextBaseline(getTextBaseline(text.getTextBaseline()));
        ctx.fillText(text.getText(), text.getX(), text.getY());
    } else if (sprite instanceof RectangleSprite) {
        RectangleSprite rect = (RectangleSprite) sprite;
        if (Double.isNaN(rect.getRadius()) || rect.getRadius() == 0) {
            if (sprite.getFill() != null && sprite.getFill() != Color.NONE) {
                ctx.setGlobalAlpha(
                        Double.isNaN(sprite.getFillOpacity()) ? opacity : opacity * sprite.getFillOpacity());
                ctx.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
            }
            if (sprite.getStroke() != null && sprite.getStroke() != Color.NONE
                    && sprite.getStrokeWidth() != 0) {
                ctx.setGlobalAlpha(Double.isNaN(sprite.getStrokeOpacity()) ? opacity
                        : opacity * sprite.getStrokeOpacity());
                ctx.strokeRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
            }
        } else {
            appendPath(ctx, rect.getPathSprite());
        }
    } else if (sprite instanceof CircleSprite) {
        CircleSprite circle = (CircleSprite) sprite;
        ctx.beginPath();
        ctx.arc(circle.getCenterX(), circle.getCenterY(), circle.getRadius(), 0, 2 * Math.PI);
        ctx.closePath();
        if (sprite.getFill() != null && sprite.getFill() != Color.NONE) {
            ctx.setGlobalAlpha(
                    Double.isNaN(sprite.getFillOpacity()) ? opacity : opacity * sprite.getFillOpacity());
            ctx.fill();
        }
        if (sprite.getStroke() != null && sprite.getStroke() != Color.NONE && sprite.getStrokeWidth() != 0) {
            ctx.setGlobalAlpha(
                    Double.isNaN(sprite.getStrokeOpacity()) ? opacity : opacity * sprite.getStrokeOpacity());
            ctx.stroke();
        }
    } else if (sprite instanceof EllipseSprite) {
        appendPath(ctx, sprite.getPathSprite());
    } else if (sprite instanceof ImageSprite) {
        ImageSprite image = (ImageSprite) sprite;
        ImageElement elt = Document.get().createImageElement();
        elt.setSrc(image.getResource().getSafeUri().asString());
        ctx.drawImage(elt, image.getX(), image.getY(), image.getWidth(), image.getHeight());
    }

    ctx.restore();

    if (!REDRAW_ALL) {
        renderedBbox.put(sprite, getBBox(sprite));
    }

    sprite.clearDirtyFlags();
}

From source file:gwt.g2d.client.graphics.visitor.EllipseVisitor.java

License:Apache License

@Override
public void visit(Surface surface) {
    Context2d context = surface.getContext();
    context.save();/* w  w w  . ja  v a2  s  .  c om*/
    context.translate(x + width / 2, y + height / 2);
    context.scale(width / 2, height / 2);
    context.arc(0, 0, 1, 0, MathHelper.TWO_PI, true);
    context.restore();
}

From source file:org.catrobat.html5player.client.Scene.java

License:Open Source License

/**
 *
 * @param imageElement// w w w  .j ava2 s .  c  o m
 * @param translateX
 * @param translateY
 * @param x
 * @param y
 * @param width
 * @param height
 * @param degrees
 * @param xSize
 * @param ySize
 */
public void drawImageElement(ImageElement imageElement, double translateX, double translateY, double x,
        double y, double width, double height, double degrees, double xSize, double ySize, double alpha) {

    long start = System.currentTimeMillis();

    Context2d context = sceneCanvas.getContext2d();

    context.save();
    context.setGlobalAlpha(alpha);
    context.translate(translateX, translateY);
    context.rotate(Math.toRadians(degrees));
    context.scale(xSize, ySize);
    context.drawImage(imageElement, x, y, width, height);

    //for testing - draws a rectangular around the sprite
    //      context.strokeRect(x, y, width, height);
    //

    context.restore();

    CatrobatDebug.debug("drawImageElement-execution took " + (System.currentTimeMillis() - start) + " ms");
}

From source file:org.cleanlogic.cesiumjs4gwt.showcase.examples.LoadImages.java

License:Apache License

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();

    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);/*from ww w. j  a  va  2  s . c o  m*/

    org.cesiumjs.cs.core.PinBuilder pinBuilder = new org.cesiumjs.cs.core.PinBuilder();
    pinBuilder.fromUrlPromise(GWT.getModuleBaseURL() + "images/Cesium_Logo_Color_Overlay.png",
            Color.WHITE().withAlpha(0.0f), 256).then(new Fulfill<CanvasElement>() {
                @Override
                public void onFulfilled(CanvasElement value) {
                    BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
                    billboardOptions.image = new ConstantProperty<>(value.toDataUrl());
                    EntityOptions entityOptions = new EntityOptions();
                    entityOptions.name = "Pin billboard through fromUrl";
                    entityOptions.billboard = new BillboardGraphics(billboardOptions);
                    entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(35, 35));
                    csVPanel.getViewer().entities().add(new Entity(entityOptions));
                }
            });

    Resource.fetchImage((ResourceImageOptions) ResourceImageOptions
            .create(GWT.getModuleBaseURL() + "images/Cesium_Logo_Color_Overlay.png"))
            .then(new Fulfill<JsImage>() {
                @Override
                public void onFulfilled(JsImage value) {
                    Canvas canvas = Canvas.createIfSupported();
                    canvas.setWidth(value.width + "px");
                    canvas.setHeight(value.height + "px");
                    Context2d context = canvas.getContext2d();
                    context.scale(0.1, 0.1);
                    context.drawImage((ImageElement) (Object) value, 0, 0);

                    BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
                    billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl());
                    EntityOptions entityOptions = new EntityOptions();
                    entityOptions.name = "Pin billboard through canvas";
                    entityOptions.billboard = new BillboardGraphics(billboardOptions);
                    entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(45, 45));
                    csVPanel.getViewer().entities().add(new Entity(entityOptions));
                }
            });

    // CORS not loaded
    Resource.fetchImage((ResourceImageOptions) ResourceImageOptions
            .create("https://www.linux.org.ru/tango/img/games-logo.png")).then(new Fulfill<JsImage>() {
                @Override
                public void onFulfilled(JsImage value) {
                    Canvas canvas = Canvas.createIfSupported();
                    canvas.setWidth(value.width + "px");
                    canvas.setHeight(value.height + "px");
                    Context2d context = canvas.getContext2d();
                    context.scale(0.1, 0.1);
                    context.drawImage((ImageElement) (Object) value, 0, 0);

                    BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
                    billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl());
                    EntityOptions entityOptions = new EntityOptions();
                    entityOptions.name = "Pin billboard CORS";
                    entityOptions.billboard = new BillboardGraphics(billboardOptions);
                    entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(55, 55));
                    csVPanel.getViewer().entities().add(new Entity(entityOptions));
                }
            });

    // Cors not loaded!
    final JsImage imageAmz = new JsImage();
    imageAmz.crossOrigin = "*";
    imageAmz.onload = new JsImage.Listener() {
        @Override
        public void function() {
            Cesium.log(imageAmz);
            /*Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(imageAmz.width + "px");
            canvas.setHeight(imageAmz.height + "px");
            Context2d context = canvas.getContext2d();
            context.scale(0.1, 0.1);
            context.drawImage((ImageElement) (Object) imageAmz, 0, 0);*/
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(imageAmz);
            //billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl("image/png"));
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(65, 65));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    };
    imageAmz.src = "https://d1.awsstatic.com/products/cloudfront/cloudfront-100_PoP_600x400.4a1edd6022833c54c41370ad9f615ae818350a23.png";

    // Worked, have Access-Control-Allow-Origin: *
    final JsImage imageWiki = new JsImage();
    imageWiki.crossOrigin = "*";
    imageWiki.onload = new JsImage.Listener() {
        @Override
        public void function() {
            Cesium.log(imageWiki);
            Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(imageWiki.width + "px");
            canvas.setHeight(imageWiki.height + "px");
            Context2d context = canvas.getContext2d();
            context.drawImage((ImageElement) (Object) imageWiki, 0, 0);
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl("image/png"));
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(75, 75));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    };
    imageWiki.src = "https://ru.wikipedia.org/static/images/project-logos/ruwiki-2x.png";

    contentPanel.add(new HTML("<p>Cluster labels, billboards and points.</p>"));
    contentPanel.add(aPanel);

    initWidget(contentPanel);
}