如何将画布中的区域复制到图像中答案

【问题标题】：How to copy an area from a canvas into an image如何将画布中的区域复制到图像中
【发布时间】：2014-12-29 15:23:21
【问题描述】：

我正在尝试使用gc.copyarea 方法将鼠标光标周围的区域从Canvas 复制到Image。之后，我想将该图像绘制到按下鼠标 1 秒后出现的合成上。

到目前为止，以下是我的代码：在我的画布的paintControl 方法中，我将该区域复制到图像：

    img = new Image(display, 40, 40);
    gc.copyArea(img, mousePosition.x-20, mousePosition.y-20);

在我的 Composite 的 paintControl 方法中，我绘制了该图像：

    if (img != null) {
        gc.drawImage(img, 0, 0);
    }

我遇到的问题是，实际上只有很小一部分区域被复制并绘制到复合材料上。在 40x40 像素区域中，只有左下角 10x20 像素区域的区域在合成中可见。

例如：

光标在组合的左上角旁边。只有光标周围的一小部分区域被绘制到复合体上

问题：如何从画布上复制一个区域并将其正确绘制到另一个复合材料上？我在代码中做错了什么？

【问题讨论】：

您创建的图像是 40x40 像素，这个大小定义了您可以从 Canvas 复制到 Composite 的矩形。另外，您确定鼠标位置正确映射到 copyArea() 中使用的 Canvas 坐标吗？

标签： java canvas swt composite

【解决方案1】：

经过反复试验，我设法得到了一些应该接近你想要的东西。

public class CopyArea {

  public static void main( String[] args ) {
    CopyArea copyArea = new CopyArea();
    copyArea.create();
    copyArea.run();
  }

  private Display display;
  private Image sourceImage;
  private Point canvasSize;
  private Shell shell;
  private Canvas source;
  private Canvas destination;
  private Point snippetOrigin;
  private Image snippet;

  CopyArea() {
    display = new Display();
    sourceImage = new Image( display, getClass().getResourceAsStream( "mona-lisa.jpeg" ) );
    canvasSize = new Point( sourceImage.getBounds().width, sourceImage.getBounds().height );
    shell = new Shell( display );
    source = new Canvas( shell, SWT.NONE );
    destination = new Canvas( shell, SWT.NONE );
  }

  void create() {
    shell.setLayout( new RowLayout() );
    source.setLayoutData( new RowData( canvasSize ) );
    source.addPaintListener( new PaintListener() {
      @Override
      public void paintControl( PaintEvent event ) {
        event.gc.drawImage( sourceImage, 0, 0 );
        if( snippetOrigin != null ) {
          snippet = new Image( display, 40, 40 );
          event.gc.copyArea( snippet, snippetOrigin.x, snippetOrigin.y );
          destination.redraw();
          snippetOrigin = null;
        }
      }
    } );
    source.addMouseListener( new MouseAdapter() {
      @Override
      public void mouseDown( MouseEvent event ) {
        snippetOrigin = new Point( event.x, event.y );
        source.redraw();
      }
    } );
    destination.setLayoutData( new RowData( canvasSize ) );
    destination.addPaintListener( new PaintListener() {
      @Override
      public void paintControl( PaintEvent event ) {
        event.gc.setBackground( display.getSystemColor( SWT.COLOR_WHITE ) );
        event.gc.fillRectangle( event.gc.getClipping() );
        if( snippet != null ) {
          event.gc.drawImage( snippet, 0, 0 );
        }
      }
    } );
  }

  void run() {
    shell.pack();
    shell.open();
    while( !shell.isDisposed() ) {
      if( !display.readAndDispatch() )
        display.sleep();
    }
    display.dispose();
  }
}

sourceImage 只是您的绘图代码的占位符。 source Canvas 侦听鼠标按下事件，然后将其客户端的 40x40 sn-p 绘制到 destination Canvas。请注意，我在这两种情况下都使用了 Canvas，但 Canvas 和 Composite 也应该可以工作。

它的工作原理如下：鼠标侦听器将鼠标位置存储到snippetOrigin 并触发source 的重绘。 source 的绘图侦听器在请求时截取刚刚绘制的部分屏幕截图 (snippetOrigin != null)，然后强制 destination 重新绘制自身。 destination simple 的paint-listener 绘制snippet 图像（如果有）。

deos 代码尚未正确剪辑复制的图像。如果你在source画布的右下角按下鼠标，也会复制一些shell的修剪。

为简洁起见，代码不会在重用 snippet 图像之前对其进行处理（并且可能存在其他泄漏）。

如果您拥有绘制等效于 source 画布的绘图代码，我宁愿重构它以便可以绘制任意部分，然后使用适当的参数调用代码以在 destination 小部件上绘制。

【讨论】：

好的，阅读您的答案后，我看到了我的错误。我首先将区域复制到图像，然后在画布上绘制源图像。所以当然不会有什么可复制的。

【解决方案2】：

试试这段代码，获取一个画布区域的副本并粘贴到一个对象中

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

function copy() {
    var imgData = ctx.getImageData(10, 10, 50, 50);
    ctx.putImageData(imgData, 10, 70);
}

在这种情况下，副本作为原点粘贴在画布目标位置

试试这个参考

https://www.w3schools.com/tags/canvas_getimagedata.asp

这是 API 参考

https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D/getImageData

【讨论】：