如何借助Chaquopy在Android中实现带缩放滚动的交互式Matplotlib绘图？

核心思路 #

你之前用ImageView展示静态图片的方式无法支持交互，原因是没有将Matplotlib的绘图逻辑与Android的触摸事件系统绑定。正确的做法是：通过Chaquopy将Matplotlib的Figure和Axes对象与自定义Android View关联，监听触摸手势（缩放、滚动）并同步调整Matplotlib绘图的显示范围，最后实时重绘。

步骤1：配置Chaquopy环境 #

确保你的Android项目已正确集成Chaquopy，并引入Matplotlib依赖：
在app/build.gradle中添加如下配置：

plugins {
    id 'com.android.application'
    id 'com.chaquo.python'
}

android {
    defaultConfig {
        // 其他配置...
        python {
            pip {
                install "matplotlib"
            }
        }
    }
}

步骤2：创建自定义交互式View #

编写一个继承自View的类，负责初始化Matplotlib对象、处理触摸手势、渲染绘图：

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;

import com.chaquo.python.Python;
import com.chaquo.python.android.AndroidPlatform;

public class InteractiveMatplotlibView extends View {
    private Bitmap plotBitmap;
    private final Paint paint = new Paint();
    private ScaleGestureDetector scaleDetector;
    private GestureDetector gestureDetector;

    // Matplotlib核心对象
    private Object figure;
    private Object axes;

    public InteractiveMatplotlibView(Context context) {
        super(context);
        init(context);
    }

    public InteractiveMatplotlibView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
        // 初始化Chaquopy
        if (!Python.isStarted()) {
            Python.start(new AndroidPlatform(context));
        }

        // 初始化Matplotlib绘图对象
        Python py = Python.getInstance();
        Object plt = py.getModule("matplotlib.pyplot");
        figure = plt.callAttr("figure", figsize=(6, 4), dpi=100);
        axes = figure.callAttr("add_subplot", 111);
        // 调用Python脚本生成初始绘图
        py.getModule("plot_generator").callAttr("create_sample_plot", axes);

        // 初始化手势检测器
        scaleDetector = new ScaleGestureDetector(context, new ScaleListener());
        gestureDetector = new GestureDetector(context, new ScrollListener());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (plotBitmap == null) {
            // 将Matplotlib图渲染为Android位图
            Object canvasAgg = Python.getInstance().getModule("matplotlib.backends.backend_agg")
                    .callAttr("FigureCanvasAgg", figure);
            Object buf = canvasAgg.callAttr("buffer_rgba");
            int width = ((Number) figure.callAttr("get_figwidth")).intValue() * 100;
            int height = ((Number) figure.callAttr("get_figheight")).intValue() * 100;
            plotBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
            plotBitmap.copyPixelsFromBuffer((java.nio.Buffer) buf);
        }
        canvas.drawBitmap(plotBitmap, 0, 0, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        scaleDetector.onTouchEvent(event);
        gestureDetector.onTouchEvent(event);
        invalidate();
        return true;
    }

    // 处理缩放手势：调整Matplotlib坐标轴范围
    private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            float scaleFactor = detector.getScaleFactor();

            // 调整X轴范围
            Object xLim = axes.callAttr("get_xlim");
            float xMin = ((Number) ((Object[]) xLim)[0]).floatValue();
            float xMax = ((Number) ((Object[]) xLim)[1]).floatValue();
            float xCenter = (xMin + xMax) / 2;
            float xRange = (xMax - xMin) / scaleFactor;
            axes.callAttr("set_xlim", xCenter - xRange/2, xCenter + xRange/2);

            // 调整Y轴范围
            Object yLim = axes.callAttr("get_ylim");
            float yMin = ((Number) ((Object[]) yLim)[0]).floatValue();
            float yMax = ((Number) ((Object[]) yLim)[1]).floatValue();
            float yCenter = (yMin + yMax) / 2;
            float yRange = (yMax - yMin) / scaleFactor;
            axes.callAttr("set_ylim", yCenter - yRange/2, yCenter + yRange/2);

            plotBitmap = null; // 重置位图触发重绘
            return true;
        }
    }

    // 处理滚动手势：平移Matplotlib坐标轴范围
    private class ScrollListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            // 计算平移比例（根据绘图尺寸和屏幕尺寸适配）
            float xTranslateRatio = distanceX / plotBitmap.getWidth();
            float yTranslateRatio = distanceY / plotBitmap.getHeight();

            // 平移X轴
            Object xLim = axes.callAttr("get_xlim");
            float xMin = ((Number) ((Object[]) xLim)[0]).floatValue();
            float xMax = ((Number) ((Object[]) xLim)[1]).floatValue();
            float xRange = xMax - xMin;
            axes.callAttr("set_xlim", xMin + xRange * xTranslateRatio, xMax + xRange * xTranslateRatio);

            // 平移Y轴
            Object yLim = axes.callAttr("get_ylim");
            float yMin = ((Number) ((Object[]) yLim)[0]).floatValue();
            float yMax = ((Number) ((Object[]) yLim)[1]).floatValue();
            float yRange = yMax - yMin;
            axes.callAttr("set_ylim", yMin + yRange * yTranslateRatio, yMax + yRange * yTranslateRatio);

            plotBitmap = null; // 重置位图触发重绘
            return true;
        }
    }
}

步骤3：编写Python绘图脚本 #

在app/src/main/python目录下创建plot_generator.py，编写你的绘图逻辑：

def create_sample_plot(axes):
    # 替换为你自己的绘图代码
    axes.plot([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], linewidth=2)
    axes.set_title("Interactive Matplotlib Plot")
    axes.set_xlabel("X Axis")
    axes.set_ylabel("Y Axis")
    axes.grid(True)

步骤4：在布局中使用自定义View #

在你的布局XML文件中添加这个交互式View：

<com.yourpackage.InteractiveMatplotlibView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

关键说明 #

1. 此方案实现的是Matplotlib原生的坐标轴缩放/平移，而非简单的位图拉伸，交互体验与桌面端Matplotlib一致。
2. 如果需要更复杂的交互（如点击数据点），可以在触摸事件中计算Matplotlib坐标系下的点击位置，再调用Python代码处理。

内容的提问来源于stack exchange，提问作者Naznin Akter