Android：创建带缩放平移功能画布及onDraw画线异常排查

Hey there! Let’s break down the most likely reasons your lines aren’t rendering as expected in your custom PinchZoomPan ImageView, plus actionable fixes for each scenario:

1. Coordinates Aren’t Matching the Image’s Transformation #

Since you’re handling pinch zoom and pan, your line coordinates need to sync up with the image’s current scale and position. If you’re using raw screen coordinates instead of applying the same transformation matrix used for the image, lines will be misaligned, stretched, or drawn in the wrong spot.

Fix:
Apply the image’s transformation matrix to the canvas before drawing lines, so your coordinates match the image’s local space:

@Override
protected void onDraw(Canvas canvas) {
    // Draw your zoomed/panned image first (existing logic)
    super.onDraw(canvas);

    // Get the matrix that transforms the image
    Matrix imageMatrix = getImageMatrix();
    // Save the canvas state before applying transformations
    canvas.save();
    // Apply the same matrix used for the image to the canvas
    canvas.concat(imageMatrix);

    // Now draw lines using coordinates relative to the original image
    Paint linePaint = new Paint();
    linePaint.setColor(Color.RED);
    linePaint.setStyle(Paint.Style.STROKE);
    linePaint.setStrokeWidth(4f);
    canvas.drawLine(100f, 100f, 300f, 300f, linePaint);

    // Restore canvas to its original state
    canvas.restore();
}

2. Paint Settings Are Causing Invisible/Weird Lines #

Your Paint object might have misconfigured properties that make lines hard to see or render incorrectly. Common culprits include:

• Using Paint.Style.FILL instead of Paint.Style.STROKE
• Stroke width set to 0 or a tiny value
• Transparent or low-opacity colors
• Missing anti-aliasing for jagged lines

Fix:
Double-check your Paint setup with this baseline example:

Paint linePaint = new Paint();
linePaint.setColor(Color.BLUE);
linePaint.setStyle(Paint.Style.STROKE); // Critical for lines
linePaint.setStrokeWidth(5f); // Adjust based on your needs
linePaint.setAntiAlias(true); // Smoothes line edges
linePaint.setStrokeCap(Paint.Cap.ROUND); // Optional: rounded line ends

3. Drawing Lines Before the Image #

If you draw lines first, the image will cover them up entirely. Make sure you always draw the image (using your existing zoom/pan logic) before rendering your custom lines.

Verify onDraw Order:

@Override
protected void onDraw(Canvas canvas) {
    // Step 1: Draw the zoomed/panned image
    super.onDraw(canvas); // Or your custom image-drawing code
    
    // Step 2: Draw lines on top of the image
    drawCustomLines(canvas);
}

4. Ignoring View Padding #

If your PinchZoomPan view has padding, the image’s drawing area is offset by those padding values. Your line coordinates need to account for this offset to stay aligned with the image.

Fix:
Adjust your canvas or coordinates to include the view’s padding:

int paddingLeft = getPaddingLeft();
int paddingTop = getPaddingTop();

// Shift canvas to account for padding before drawing lines
canvas.translate(paddingLeft, paddingTop);

// Now draw lines using coordinates relative to the padded image area

5. Manual Scale Factor Calculations Are Off #

If you’re calculating scale/translation values manually instead of reusing the matrix from your zoom/pan logic, lines won’t scale consistently with the image. Always rely on the same transformation matrix applied to the image to keep everything in sync.

Pro Tip:
Log the matrix values to debug discrepancies:

float[] matrixValues = new float[9];
imageMatrix.getValues(matrixValues);
float scaleX = matrixValues[Matrix.MSCALE_X];
float scaleY = matrixValues[Matrix.MSCALE_Y];
float translateX = matrixValues[Matrix.MTRANS_X];
float translateY = matrixValues[Matrix.MTRANS_Y];
Log.d("PinchZoom", "Scale: " + scaleX + ", Translate: " + translateX);

内容的提问来源于stack exchange，提问作者J. Cash