Examples with Context2d com.google.gwt.canvas.dom.client.Context2d used on opensource projects

Example 1 with Context2d

use of com.google.gwt.canvas.dom.client.Context2d in project rstudio by rstudio.

the class GraphLine method draw.

private void draw(Canvas canvas, GraphTheme theme) {
    int height = theme.getRowHeight();
    int colWidth = theme.getColumnWidth();
    double pad = theme.getVerticalLinePadding();
    canvas.setCoordinateSpaceHeight(height);
    canvas.setCoordinateSpaceWidth(colWidth * getTotalWidth(theme));
    Context2d ctx = canvas.getContext2d();
    //ctx.clearRect(0, 0, colWidth * columns_.length, height);
    ctx.translate(colWidth / 2.0, 0);
    int startPos = -1;
    int endPos = -1;
    int nexusColumn = -1;
    for (int i = 0; i < columns_.length; i++) {
        GraphColumn c = columns_[i];
        if (!c.start)
            startPos++;
        if (!c.end)
            endPos++;
        ctx.setStrokeStyle(theme.getColorForId(c.id));
        ctx.setLineWidth(theme.getStrokeWidth());
        ctx.setLineJoin(LineJoin.ROUND);
        if (!c.nexus && !c.start && !c.end) {
            // Just draw a line from start to end position
            ctx.beginPath();
            ctx.moveTo(startPos * colWidth, 0);
            ctx.lineTo(startPos * colWidth, pad);
            // This next lineTo helps ensure that the shape of the line looks
            // congruous to any specials on the same line
            ctx.lineTo(Math.min(startPos, endPos) * colWidth, height / 2.0);
            ctx.lineTo(endPos * colWidth, height - pad);
            ctx.lineTo(endPos * colWidth, height);
            ctx.stroke();
        } else {
            if (c.nexus) {
                nexusColumn = i;
                ctx.setFillStyle(theme.getColorForId(c.id));
            }
            if (!c.start) {
                // draw from i to nexusColumn;
                ctx.beginPath();
                ctx.moveTo(startPos * colWidth, 0);
                ctx.lineTo(startPos * colWidth, pad);
                ctx.lineTo(nexusColumn * colWidth, height / 2.0);
                ctx.stroke();
            }
            if (!c.end) {
                // draw from nexusColumn to endPosition
                ctx.beginPath();
                ctx.moveTo(nexusColumn * colWidth, height / 2.0);
                ctx.lineTo(endPos * colWidth, height - pad);
                ctx.lineTo(endPos * colWidth, height);
                ctx.stroke();
            }
        }
    }
    // draw a circle on the nexus
    ctx.beginPath();
    ctx.arc(nexusColumn * colWidth, height / 2.0, theme.getCircleRadius() + theme.getStrokeWidth(), 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(nexusColumn * colWidth, height / 2.0, theme.getCircleRadius(), 0, Math.PI * 2);
    ctx.closePath();
    ctx.setFillStyle("white");
    ctx.fill();
}

Example 2 with Context2d

use of com.google.gwt.canvas.dom.client.Context2d in project playn by threerings.

the class HtmlCanvasImage method setRgb.

@Override
public void setRgb(int startX, int startY, int width, int height, int[] rgbArray, int offset, int scanSize) {
    Context2d ctx = canvas.canvas().getContext2d();
    ImageData imageData = ctx.createImageData(width, height);
    CanvasPixelArray pixelData = imageData.getData();
    int i = 0;
    int dst = offset;
    for (int y = 0; y < height; y++) {
        for (int x = 0; x < width; x++) {
            int argb = rgbArray[dst + x];
            pixelData.set(i++, (argb >> 16) & 255);
            pixelData.set(i++, (argb >> 8) & 255);
            pixelData.set(i++, (argb) & 255);
            pixelData.set(i++, (argb >> 24) & 255);
        }
        dst += scanSize;
    }
    ctx.putImageData(imageData, startX, startY);
}

Example 3 with Context2d

use of com.google.gwt.canvas.dom.client.Context2d in project Zong by Xenoage.

the class GwtTextMeasurer method measure.

@Override
public TextMetrics measure(FontInfo font, String text) {
    Context2d context = getContext();
    context.setFont(GwtFontUtils.getCssFont(font));
    com.google.gwt.canvas.dom.client.TextMetrics metrics = context.measureText(text);
    float width = Units.pxToMm((float) metrics.getWidth(), 1);
    // we do not know the ascent from HTML. we use the width of "W" instead, which should be similar.
    // as the descent and the leading we usethe third of the ascent.n ha
    metrics = context.measureText("W");
    float ascent = Units.pxToMm((float) metrics.getWidth(), 1);
    return new TextMetrics(ascent, ascent / 3, ascent / 3, width);
}

Example 4 with Context2d

use of com.google.gwt.canvas.dom.client.Context2d in project ovirt-engine by oVirt.

the class AbstractLineChartProgressBarColumn method drawChart.

private void drawChart(Canvas canvas, List<Integer> normalizedPoints) {
    Context2d context2d = canvas.getContext2d();
    context2d.clearRect(0, 0, canvas.getCoordinateSpaceWidth(), canvas.getCoordinateSpaceHeight());
    context2d.beginPath();
    int actualX = leftMargin;
    int stepSize = calculateStepSize(normalizedPoints, getChartWidth());
    int lastX = leftMargin;
    int lastY = calculateHeight(normalizedPoints.get(0), canvas.getCoordinateSpaceHeight());
    int lastPoint = normalizedPoints.get(0);
    context2d.moveTo(lastX, lastY);
    for (int point : normalizedPoints.subList(1, normalizedPoints.size())) {
        actualX += stepSize;
        lastX = actualX;
        lastY = calculateHeight(point, canvas.getCoordinateSpaceHeight());
        lastPoint = point;
        context2d.lineTo(lastX, lastY);
    }
    context2d.setLineWidth(lineWidth);
    // $NON-NLS-1$
    context2d.setStrokeStyle(chartLineColor);
    context2d.stroke();
    drawLineDecoration(context2d, lastX, lastY, lastPoint);
}

Example 5 with Context2d

use of com.google.gwt.canvas.dom.client.Context2d in project gwt-cs by iSergio.

the class LoadImages method buildPanel.

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();
    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);
    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);
}