CodenameOne 图表在共享或模拟器屏幕捕获时呈现效果不佳

Question

最近的更新在分享时在图表上绘制了线条，但在分享时和在模拟器上进行屏幕截图时图表似乎有点乱。图例旋转并移动到网格区域，标题丢失，并且有一个黄色轮廓贯穿网格区域。 Different chart renderings。最右边的图像在我粘贴时以某种方式被镜像，共享时它实际上不是 mirror-image。

这是一个测试用例：

package com.fastlaneinnovations.chartexample;

import com.codename1.charts.ChartComponent;
import com.codename1.charts.models.XYMultipleSeriesDataset;
import com.codename1.charts.models.XYSeries;
import com.codename1.charts.renderers.XYMultipleSeriesRenderer;
import com.codename1.charts.renderers.XYSeriesRenderer;
import com.codename1.charts.util.ColorUtil;
import com.codename1.charts.views.LineChart;
import com.codename1.components.ShareButton;
import com.codename1.io.FileSystemStorage;
import com.codename1.io.Log;
import com.codename1.ui.Container;
import com.codename1.ui.Display;
import com.codename1.ui.Form;
import com.codename1.ui.Image;
import com.codename1.ui.Label;
import com.codename1.ui.events.ActionEvent;
import com.codename1.ui.events.ActionListener;
import com.codename1.ui.layouts.BorderLayout;
import com.codename1.ui.plaf.UIManager;
import com.codename1.ui.util.ImageIO;
import com.codename1.ui.util.Resources;

import java.io.IOException;
import java.io.OutputStream;
import java.util.Hashtable;
import java.util.Set;

public class ChartExample {

    private Form current;
    private Resources theme;
    private XYMultipleSeriesRenderer chartRenderer;
    private Container rpmChartContainer;
    private XYSeries series;
    private LineChart lineChart;
    private ChartComponent chart;
    private Hashtable<Long, Integer> chartData;
    private String chartName = "Chart";
    private String path;
    private Object os;
    private int chartHeight;
    private int chartWidth;
    private ShareButton share;
    private Set<Long> keys;

    public void init(Object context) {
        theme = UIManager.initFirstTheme("/theme");

        // Pro only feature, uncomment if you have a pro subscription
        // Log.bindCrashProtection(true);
    }

    public void start() {
        if (current != null) {
            current.show();
            return;
        }
        Form form = new Form();
        form.setLayout(new BorderLayout());
        chartData = new Hashtable<Long, Integer>();
        for (int i = 0; i < 8000; i += 100) {
            chartData.put(Long.valueOf(i), Integer.valueOf(i));
        }
        rpmChartContainer = new Container();
        rpmChartContainer.setLayout(new BorderLayout());
        series = new XYSeries("RPM");
        chartRenderer = createChartRenderer();
        setChartSettings(chartRenderer, "RPM vs Time", "Time (s)", "RPM", 0.0,
                10.0, 0.0, 8000.0, ColorUtil.YELLOW, ColorUtil.WHITE);
        lineChart = new LineChart(buildDataSet(series), chartRenderer);
        chart = new ChartComponent(lineChart);
        chart.setUIID("ChartComponent");
        rpmChartContainer.addComponent(BorderLayout.CENTER, chart);
        updateChart();
        share = new ShareButton();
        share.setName(chartName);
        share.setText("Share this chart");
        share.setTextToShare("RPM chart created by R-P-M Control Center app");
        rpmChartContainer.add(BorderLayout.SOUTH, share);
        form.add(BorderLayout.CENTER, rpmChartContainer);
        form.show();
        createShareButton();
    }

    public void stop() {
        current = Display.getInstance().getCurrent();
    }

    public void destroy() {
    }

    public void updateChart() {
        keys = chartData.keySet();
        series.clear();
        for (Long key : keys) {
            series.add((key / 1000.0), (chartData.get(key) / 1.0));
        }

    }

    private XYMultipleSeriesRenderer createChartRenderer() {
        XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
        renderer.setPointSize(3f);
        XYSeriesRenderer seriesRenderer = new XYSeriesRenderer();
        seriesRenderer.setColor(ColorUtil.GREEN);
        // seriesRenderer.setPointStyle(PointStyle.CIRCLE);
        // seriesRenderer.setFillPoints(true);
        seriesRenderer.setLineWidth(5f);
         seriesRenderer.setShowLegendItem(true);
        renderer.addSeriesRenderer(seriesRenderer);
        return renderer;
    }

    private XYMultipleSeriesDataset buildDataSet(XYSeries dataSeries) {
        XYMultipleSeriesDataset multiDataSet = new XYMultipleSeriesDataset();
        multiDataSet.addSeries(dataSeries);
        return multiDataSet;

    }

    private void setChartSettings(XYMultipleSeriesRenderer renderer,
            String title, String xTitle, String yTitle, double xMin,
            double xMax, double yMin, double yMax, int axesColor,
            int labelsColor) {
        renderer.setChartTitle(title);
        renderer.setXTitle(xTitle);
        renderer.setYTitle(yTitle);
        renderer.setXAxisMin(xMin);
        // renderer.setXAxisMax(xMax);
        renderer.setYAxisMin(yMin);
        renderer.setYAxisMax(yMax);
        renderer.setAxesColor(axesColor);
        renderer.setLabelsColor(labelsColor);
        renderer.setMarginsColor(ColorUtil.BLACK);
        renderer.setGridColor(ColorUtil.BLACK);
    }

    public void createShareButton() {
        rpmChartContainer.revalidate();
        chartWidth = rpmChartContainer.getWidth();
        chartHeight = rpmChartContainer.getHeight();
        Image chartAsImage = Image.createImage(chartWidth, chartHeight);
        rpmChartContainer.paint(chartAsImage.getGraphics());
        setShareImage(share, chartAsImage);

    }

    public void setShareImage(ShareButton shareButton, Image shareImage) {
        OutputStream os = null;
        final String shareImagePath = FileSystemStorage.getInstance()
                .getAppHomePath() + shareButton.getName();
        FileSystemStorage.getInstance().delete(shareImagePath);
        try {
            os = FileSystemStorage.getInstance().openOutputStream(
                    shareImagePath);
            ImageIO.getImageIO().save(shareImage, os, ImageIO.FORMAT_JPEG,
                    0.95f);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                os.close();
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
        shareButton.setImageToShare(shareImagePath, "image/jpeg");
    }
}

Answer 1

在 iOS 可变图像上实现 2D 变换时，我修复了一些与模拟器中可变图像变换相关的错误。在下一次插件更新之前，您可能没有这些。

至于你截图右边的第三张图。那是什么设备？能否与您的图表分享一个测试用例，以便我对其进行测试？

CodenameOne 图表在共享或模拟器屏幕捕获时呈现效果不佳

CodenameOne Charts not rendering well when sharing or simulator screen capture

codenameone