小编Fro*_*and的帖子

我正在创建一个图像编辑应用程序.在其中我提供设施打开相机或画廊来选择图片.在选择图片时,用户将导航到其他页面.在其他页面显示图片我正在使用一个实现的视图AppCompactImageView.现在,我正在通过使用edittext添加文本.单击软键盘的"完成"按钮,edittext将消失,将被替换为TextView.现在我想在整个布局中拖动这个TextView.但经过下降操作后,它就会消失.以下是我的代码.任何帮助都会很明显.

1. DrawActivity.java

   public class DrawActivity extends AppCompatActivity {

   DrawView imgView;
   Button resetBtn, saveBtn;
   ImageButton undoBtn;
   Bundle extras;
   Context context;
   EditText addTxtBox;
   ImageView brushImg, fontImg;
   TextView addedTxtView;
   // LinearLayout mainLinear;
   RelativeLayout mainRelative;
   public int rowX, rowY;
   public String txtVal;
   private android.widget.RelativeLayout.LayoutParams layoutParams;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       getSupportActionBar().hide();
       setContentView(R.layout.activity_draw);
   
       context = this.getApplicationContext();
   
       mainRelative = (RelativeLayout) findViewById(R.id.relativeLayout1);
       imgView = (DrawView) findViewById(R.id.frag_home_iv_main);
       resetBtn = (Button) findViewById(R.id.clearBtn);
       undoBtn = (ImageButton) findViewById(R.id.undoBtn);
       saveBtn = (Button) findViewById(R.id.saveBtn);
       addTxtBox = (EditText) …

   Run Code Online (Sandbox Code Playgroud)

在画布上绘图工作得很好.即使橡皮擦也工作得很好.问题是,当画布保存为图像时,它绘制的是黑色线而不是橡皮擦.

为了更好地理解,我添加了屏幕截图和代码.

1.在删除抽奖时 -

一个.源代码 -

erase(){
      this.ctx.globalCompositeOperation = 'destination-out';
    } 

handleMove(ev){

  // let ctx = this.canvasElement.getContext('2d');
  let currentX = ev.touches[0].pageX - this.offsetX;
  let currentY = ev.touches[0].pageY - this.offsetY;

  this.ctx.beginPath();
  this.ctx.lineJoin = "round";
  this.ctx.moveTo(this.lastX, this.lastY);
  this.ctx.lineTo(currentX, currentY);
  this.ctx.closePath();
  this.ctx.strokeStyle = this.currentColour;
  this.ctx.lineWidth = this.brushSize;
  this.ctx.stroke();      


  this.undoList.push({
    x_start: currentX,
    y_start: currentY,
    x_end: this.lastX,
    y_end: this.lastY,
    color: this.currentColour,
    size: this.brushSize,
    mode: this.ctx.globalCompositeOperation
  });

  this.lastX = currentX;
  this.lastY = currentY;

}

湾 输出 -

2.画布保存为图像 -

一个.代码 -

this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
    setTimeout(() …

我已将我的颤振项目从 1.26.3 更新到 2.1.0。从那时起，我面临一些问题。我收到错误消息：“期望类型为‘SkDeletable’的值，但得到类型为‘空’的值”。

有谁知道与什么有关？

我创建了一个应用程序,用户可以在画布上绘制任何内容.我已将背景图像添加到画布中.我希望画布覆盖屏幕上的剩余空间.因此,我保持宽度和高度百分比.

问题 - 现在每当我在画布上画一些东西时,它都不会跟随鼠标/触摸屏的准确位置.如果我在下方绘制,它将从触摸中提取近20px.(不确定像素有多少但是我的假设)

请仔细阅读下面的代码.

1. HTML

<ion-row>
      <canvas no-bounce 
      (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' (click)="removeSelectedTxt()"
      [ngStyle]="{'background': 'url(' + selectedImage + ') no-repeat center center fixed', '-webkit-background-size': 'contain',
      '-moz-background-size': 'contain',
      '-o-background-size': 'contain',
      'background-size': 'contain',
      'width': '98%',
      'height': '65%'}" #canvas ></canvas>
  </ion-row>

2. CSS

canvas {
      display: block;
      border: 1px solid #000;
      position: fixed;
      top: 10%;
      left: 1%;
    }

3. TS文件

    import { Component, ViewChild,  ElementRef} from '@angular/core';

     @ViewChild('canvas') public canvas: ElementRef;

    this.canvasElement = this.canvas.nativeElement;

handleStart(ev){

        this.lastX = ev.touches[0].pageX;
        this.lastY = ev.touches[0].pageY;
    }

    handleMove(ev){ …

我想把图像放在画布上.最初我用图像作为背景.但每当我将画布转换为图像时,背景图像都不会被复制.因此我试图在画布上绘制图像.我从设备图库中选择图像.将图像URL存储为字符串并传递给下一个组件.我检查过,能够得到价值.请看下面的代码,让我知道我做错了什么.

1. HTML

<canvas no-bounce id="canvas"
    (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' (touchend)='handleEnd($event)' (click)="removeSelectedTxt()"
    [ngStyle]="{
    'width': '98%',
    'height': '65%'}" #canvas ></canvas>

2. ts文件

@ViewChild('canvas') public canvas: ElementRef;

ionViewDidLoad() {
   console.log('ionViewDidLoad ImageHomePage');
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    let image = this.renderer.createElement('img');
    image.src = this.selectedImage;
    this.ctx.drawImage(image,10, 10, this.canvasElement.width, 
    this.canvasElement.height);
}

我用另一种方式也......

方法2-

ionViewDidLoad() {
    // this.selectedImage = this.route.snapshot.params['id'];
    console.log('ionViewDidLoad ImageHomePage');
    let canvasID= document.getElementById("canvas") as HTMLCanvasElement; 
    let canvasContext = canvasID.getContext("2d");
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    let image = new Image() as HTMLImageElement;
    image.onload = function() …