Examples with CanvasImage playn.core.CanvasImage used on opensource projects

Example 16 with CanvasImage

use of playn.core.CanvasImage in project playn by threerings.

the class CanvasTest method addTestCanvas.

private void addTestCanvas(String descrip, int width, int height, Drawer drawer) {
    CanvasImage image = createCanvasImage(width, height, drawer);
    addTestLayer(descrip, width, height, graphics().createImageLayer(image));
}

Example 17 with CanvasImage

use of playn.core.CanvasImage in project playn by threerings.

the class CanvasTest method init.

@Override
public void init() {
    nextX = nextY = GAP;
    lastSecs = -1;
    addTestCanvas("radial fill gradient", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            canvas.setFillGradient(graphics().createRadialGradient(0, 0, 50, new int[] { 0xFFFF0000, 0xFF00FF00 }, new float[] { 0, 1 }));
            canvas.fillRect(0, 0, 100, 100);
        }
    });
    addTestCanvas("linear fill gradient", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            canvas.setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
            canvas.fillRect(0, 0, 100, 100);
        }
    });
    addTestCanvas("image fill pattern", 100, 100, "images/tile.png", new ImageDrawer() {

        public void draw(Canvas canvas, Image tile) {
            canvas.setFillPattern(tile.toPattern());
            canvas.fillRect(0, 0, 100, 100);
        }
    });
    addTestCanvas("lines and circles", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            canvas.setFillColor(0xFF99CCFF);
            canvas.fillRect(0, 0, 100, 100);
            // draw a point and some lines
            canvas.setStrokeColor(0xFFFF0000);
            canvas.drawPoint(50, 50);
            canvas.drawLine(0, 25, 100, 25);
            canvas.drawLine(0, 75, 100, 75);
            canvas.drawLine(25, 0, 25, 100);
            canvas.drawLine(75, 0, 75, 100);
            // stroke and fill a circle
            canvas.strokeCircle(25, 75, 10);
            canvas.setFillColor(0xFF0000FF);
            canvas.fillCircle(75, 75, 10);
        }
    });
    addTestCanvas("image, subimage", 100, 100, "images/orange.png", new ImageDrawer() {

        public void draw(Canvas canvas, Image orange) {
            canvas.setFillColor(0xFF99CCFF);
            canvas.fillRect(0, 0, 100, 100);
            // draw an image normally, scaled, cropped, cropped and scaled, etc.
            float half = 37 / 2f;
            canvas.drawImage(orange, 10, 10);
            canvas.drawImage(orange, 55, 10, 37, 37, half, half, half, half);
            canvas.drawImage(orange, 10, 55, 37, 37, half, 0, half, half);
            canvas.drawImage(orange, 55, 55, 37, 37, half, half / 2, half, half);
        }
    });
    CanvasImage repimg = createCanvasImage(30, 30, new Drawer() {

        public void draw(Canvas canvas) {
            canvas.setFillColor(0xFF99CCFF);
            canvas.fillCircle(15, 15, 15);
            canvas.setStrokeColor(0xFF000000);
            canvas.strokeRect(0, 0, 30, 30);
        }
    });
    repimg.setRepeat(true, true);
    ImageLayer layer = graphics().createImageLayer(repimg);
    layer.setSize(100, 100);
    addTestLayer("ImageLayer repeat x/y", 100, 100, layer);
    timeImg = graphics().createImage(100, 100);
    addTestLayer("updated canvas", 100, 100, graphics().createImageLayer(timeImg));
    addTestCanvas("filled bezier path", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            // draw a rounded rect with bezier curves
            Path path = canvas.createPath();
            path.moveTo(10, 0);
            path.lineTo(90, 0);
            path.bezierTo(95, 0, 100, 5, 100, 10);
            path.lineTo(100, 90);
            path.bezierTo(100, 95, 95, 100, 90, 100);
            path.lineTo(10, 100);
            path.bezierTo(5, 100, 0, 95, 0, 90);
            path.lineTo(0, 10);
            path.bezierTo(0, 5, 5, 0, 10, 0);
            path.close();
            canvas.setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
            canvas.fillPath(path);
        }
    });
    addTestCanvas("gradient round rect", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            // draw a rounded rect directly
            canvas.setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
            canvas.fillRoundRect(0, 0, 100, 100, 10);
        }
    });
    addTestCanvas("gradient filled text", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            // draw a rounded rect directly
            canvas.setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
            TextLayout capF = graphics().layoutText("F", new TextFormat().withFont(F_FONT.derive(96)));
            canvas.fillText(capF, 15, 5);
        }
    });
    addTestCanvas("nested round rect", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            // demonstrates a bug (now worked around) in Android round-rect drawing
            canvas.setFillColor(0xFFFFCC99);
            canvas.fillRoundRect(0, 0, 98.32f, 29.5f, 12f);
            canvas.setFillColor(0xFF99CCFF);
            canvas.fillRoundRect(3, 3, 92.32f, 23.5f, 9.5f);
        }
    });
    addTestCanvas("android fill/stroke bug", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            float dotRadius = 40;
            canvas.save();
            canvas.setFillGradient(graphics().createRadialGradient(100 / 3, 100 / 2.5f, dotRadius, new int[] { 0xFFFFFFFF, 0xFFCC66FF }, new float[] { 0f, 1f }));
            canvas.fillCircle(50, 50, dotRadius);
            canvas.restore();
            canvas.setStrokeColor(0xFF000000);
            canvas.setStrokeWidth(1.5f);
            canvas.strokeCircle(50, 50, dotRadius);
        }
    });
    addTestCanvas("transform test", 100, 100, new Drawer() {

        public void draw(Canvas canvas) {
            canvas.setFillColor(0xFFCCCCCC).fillRect(0, 0, 50, 50);
            canvas.setFillColor(0xFFCCCCCC).fillRect(50, 50, 50, 50);
            TextLayout capF = graphics().layoutText("F", new TextFormat().withFont(F_FONT));
            float theta = -FloatMath.PI / 4, tsin = FloatMath.sin(theta), tcos = FloatMath.cos(theta);
            canvas.setFillColor(0xFF000000).fillText(capF, 0, 0);
            canvas.transform(tcos, -tsin, tsin, tcos, 50, 50);
            canvas.setFillColor(0xFF000000).fillText(capF, 0, 0);
        }
    });
    addTestCanvas("round rect precision", 100, 100, new Drawer() {

        float bwid = 4;

        void outer(Canvas canvas, float y) {
            canvas.setFillColor(0xFF000000);
            canvas.fillRect(2, y, 94, 30);
        }

        void inner(Canvas canvas, float y) {
            canvas.setFillColor(0xFF555555);
            canvas.fillRect(2 + bwid, y + bwid, 94 - bwid * 2, 30 - bwid * 2);
        }

        void stroke(Canvas canvas, float y) {
            canvas.setStrokeColor(0xFF99CCFF);
            canvas.setStrokeWidth(bwid);
            canvas.strokeRoundRect(2 + bwid / 2, y + bwid / 2, 94 - bwid, 30 - bwid, 10);
        }

        public void draw(Canvas canvas) {
            float y = 1;
            outer(canvas, y);
            inner(canvas, y);
            stroke(canvas, y);
            y += 34;
            outer(canvas, y);
            stroke(canvas, y);
            inner(canvas, y);
            y += 34;
            stroke(canvas, y);
            outer(canvas, y);
            inner(canvas, y);
        }
    });
    Image tileimg = assets().getImage("images/tile.png");
    tileimg.setRepeat(true, true);
    addTestLayer("img layer anim setWidth", 100, 100, tileLayer = graphics().createImageLayer(tileimg));
    tileLayer.setSize(0, 100);
}

Example 18 with CanvasImage

use of playn.core.CanvasImage in project playn by threerings.

the class ClippedGroupTest method init.

@Override
public void init() {
    GroupLayer rootLayer = graphics().rootLayer();
    final CanvasImage img = graphics().createImage(100, 50);
    img.canvas().setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
    img.canvas().fillRoundRect(0, 0, 100, 50, 10);
    // create an immediate layer that draws the boundaries of our clipped group layers
    rootLayer.add(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            // draw the border of our various clipped groups
            surf.setFillColor(0xFF000000);
            outline(surf, g1);
            outline(surf, g2);
            outline(surf, g3);
            outline(surf, g4);
            outline(surf, g5);
        }

        protected void outline(Surface surf, Layer.HasSize ly) {
            drawRect(surf, ly.tx() - ly.originX(), ly.ty() - ly.originY(), ly.width(), ly.height());
        }

        protected void drawRect(Surface surf, float x, float y, float w, float h) {
            float left = x - 1, top = y - 1, right = x + w + 2, bot = y + h + 2;
            surf.drawLine(left, top, right, top, 1);
            surf.drawLine(right, top, right, bot, 1);
            surf.drawLine(left, top, left, bot, 1);
            surf.drawLine(left, bot, right, bot, 1);
        }
    }));
    // create a group layer with a static clip, and a rotating image inside
    g1 = graphics().createGroupLayer(100, 100);
    // test the origin not being at zero/zero
    g1.setOrigin(50, 0);
    i1 = graphics().createImageLayer(img);
    i1.setOrigin(i1.width() / 2, i1.height() / 2);
    g1.addAt(i1, 50, 50);
    rootLayer.addAt(g1, 75, 25);
    // static image inside and animated clipped width
    g2 = graphics().createGroupLayer(100, 100);
    g2.setOrigin(50, 50);
    g2.addAt(graphics().createImageLayer(img), (100 - img.width()) / 2, (100 - img.height()) / 2);
    rootLayer.addAt(g2, 200, 75);
    // nest a group layer inside with an animated origin
    inner = graphics().createGroupLayer();
    inner.addAt(graphics().createImageLayer(img), (100 - img.width()) / 2, (100 - img.height()) / 2);
    g3 = graphics().createGroupLayer(100, 100);
    g3.add(inner);
    rootLayer.addAt(g3, 275, 25);
    // create a group layer with a static clip, and a rotating surface image inside
    g4 = graphics().createGroupLayer(100, 100);
    SurfaceImage si = graphics().createSurface(100, 50);
    si.surface().setFillColor(0xFF99CCFF).fillRect(0, 0, 100, 50);
    s1 = graphics().createImageLayer(si);
    s1.setOrigin(s1.width() / 2, s1.height() / 2);
    g4.addAt(s1, 50, 50);
    rootLayer.addAt(g4, 400, 25);
    // put a large clipped group inside a small one
    g5Inner = graphics().createGroupLayer(150, 150);
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), -img.width(), -img.height());
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), -img.width(), img.height());
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), img.width(), -img.height());
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), img.width(), img.height());
    g5 = graphics().createGroupLayer(100, 100);
    g5.addAt(g5Inner, -25, -25);
    rootLayer.addAt(g5, 525, 25);
}

Example 19 with CanvasImage

use of playn.core.CanvasImage in project playn by threerings.

the class ImageTypeTest method init.

@Override
public void init() {
    rootLayer = graphics().rootLayer();
    // add a half white, half blue background
    SurfaceImage bg = graphics().createSurface((int) (4 * width), (int) (4 * height));
    bg.surface().setFillColor(Color.rgb(255, 255, 255));
    bg.surface().fillRect(0, 0, bg.surface().width(), bg.surface().height());
    bg.surface().setFillColor(Color.rgb(0, 0, 255));
    bg.surface().fillRect(0, bg.surface().width() / 2, bg.surface().width(), bg.surface().height() / 2);
    rootLayer.add(graphics().createImageLayer(bg));
    image1 = assets().getImage(imageSrc);
    image1.addCallback(new Callback<Image>() {

        @Override
        public void onSuccess(Image image) {
            // once the image loads, create our layers
            imageLayer1 = graphics().createImageLayer(image);
            SurfaceImage surface1 = graphics().createSurface(image.width(), image.height());
            surface1.surface().drawImage(image, 0, 0);
            surfaceLayer1 = graphics().createImageLayer(surface1);
            CanvasImage canvas1 = graphics().createImage(image.width(), image.height());
            canvas1.canvas().drawImage(image, 0, 0);
            canvasLayer1 = graphics().createImageLayer(canvas1);
            imageLayer2 = graphics().createImageLayer(image);
            SurfaceImage surface2 = graphics().createSurface(image.width(), image.height());
            surface2.surface().drawImage(image, 0, 0);
            surfaceLayer2 = graphics().createImageLayer(surface2);
            CanvasImage canvas2 = graphics().createImage(image.width(), image.height());
            canvas2.canvas().drawImage(image, 0, 0);
            canvasLayer2 = graphics().createImageLayer(canvas2);
            // add layers to the rootLayer
            rootLayer.addAt(imageLayer1, offset, offset);
            rootLayer.addAt(surfaceLayer1, offset + width, offset);
            rootLayer.addAt(canvasLayer1, offset + 2 * width, offset);
            rootLayer.addAt(imageLayer2, offset, offset + 2 * height);
            rootLayer.addAt(surfaceLayer2, offset + width, offset + 2 * height);
            rootLayer.addAt(canvasLayer2, offset + 2 * width, offset + 2 * height);
        }

        @Override
        public void onFailure(Throwable err) {
            log().error("Error loading image", err);
        }
    });
    // add ground truth image
    imageGroundTruth = assets().getImage(imageGroundTruthSrc);
    imageGroundTruth.addCallback(new Callback<Image>() {

        @Override
        public void onSuccess(Image image) {
            groundTruthLayer = graphics().createImageLayer(image);
            rootLayer.addAt(groundTruthLayer, 3 * width, 0);
        }

        @Override
        public void onFailure(Throwable err) {
            log().error("Error loading image", err);
        }
    });
}

Example 20 with CanvasImage

use of playn.core.CanvasImage in project playn by threerings.

the class ImmediateTest method init.

@Override
public void init() {
    GroupLayer rootLayer = graphics().rootLayer();
    final CanvasImage circle = graphics().createImage(100, 100);
    circle.canvas().setFillColor(0xFFCC99FF);
    circle.canvas().fillCircle(50, 50, 50);
    final CanvasImage sausage = graphics().createImage(100, 50);
    sausage.canvas().setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
    sausage.canvas().fillRoundRect(0, 0, 100, 50, 10);
    // add an unclipped layer which will draw our background and outlines
    rootLayer.add(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFFFFCC99);
            surf.fillRect(0, 0, graphics().width(), graphics().height());
            // fill a rect that will be covered except for one pixel by the clipped immediate layers
            surf.setFillColor(0xFF000000);
            surf.fillRect(29, 29, 202, 202);
            surf.fillRect(259, 29, 102, 102);
            surf.fillRect(259, 159, 102, 102);
        }
    }));
    // add a clipped layer that will clip a fill and image draw
    ImmediateLayer ilayer = graphics().createImmediateLayer(200, 200, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            // this fill should be clipped to our bounds
            surf.setFillColor(0xFF99CCFF);
            surf.fillRect(-50, -50, 300, 300);
            // and this image should be clipped to our bounds
            surf.drawImage(circle, 125, -25);
        }
    });
    // adjust the origin to ensure that is accounted for in the clipping
    ilayer.setOrigin(100, 100);
    rootLayer.addAt(ilayer, 130, 130);
    // add a clipped layer that draws an image through a rotation transform
    rootLayer.addAt(graphics().createImmediateLayer(100, 100, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFF99CCFF);
            surf.fillRect(0, 0, 100, 100);
            surf.translate(50, 50);
            surf.rotate(rotation);
            surf.translate(-50, -50);
            surf.drawImage(sausage, 0, 25);
        }
    }), 260, 30);
    // add a clipped layer that draws an image through a translation transform
    rootLayer.addAt(graphics().createImmediateLayer(100, 100, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFF99CCFF);
            surf.fillRect(0, 0, 100, 100);
            surf.translate(FloatMath.sin(elapsed) * 50, FloatMath.cos(elapsed) * 50 + 25);
            surf.drawImage(sausage, 0, 0);
        }
    }), 260, 160);
}