Question

好吧，这很难解释，但我会尽可能清楚地解释我的问题。

我目前有一个带有几个预加载形状的HTML5 Canvas，我将其更改为图像。我使用的是this example的修改版本。在画布上，我现在可以拖放，选择预加载的形状。

我已经实现了一个选项，可以使用以下选项将新图像上传到画布：

var imageLoader = document.getElementById('uploader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var imgNew = new Image();
        imgNew.onload = function(){
            ctx.drawImage(imgNew, 0, 0);

        }
        imgNew.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

现在只需将图像放在画布的左上角，当我选择其他形状时，此图像将消失。画布中已有的所有形状都在一个名为“形状”的数组中。在示例中，当您在画布上单击鼠标时，可以选择添加新形状，这是代码：

 // double click for making new shapes
  canvas.addEventListener('dblclick', function(e) {
    var mouse = myState.getMouse(e);
    myState.addShape(new Shape(mouse.x - 10, mouse.y - 10, 20, 20, 'rgba(0,255,0,.6)'));
  }, true);

这是双击时调用的addShape部分：

CanvasState.prototype.addShape = function(shape) {
  this.shapes.push(shape);
  this.valid = false;
}

我要做的是当我使用文件上传上传图像时，图像应该添加到'形状'数组中，这样我也可以拖放，选择上传的图像。（基本上我需要对上传的图像执行相同的操作，因为我可以对预加载的图像执行相同操作）我的猜测是它应该像doubleclick方法和addShape那样完成，但我无法使其工作。

我现在的版本的工作版本可以在这里找到：
http://codepen.io/anon/pen/qLuCy/

如果有人知道如何让它工作，那就太好了！

Answer 1

首先是结果，在这里：http://codepen.io/anon/pen/qBmnC/

您的形状对象只能绘制一个单一的硬编码图像，因此请更改此图像并使其形状为颜色或图像。事实上，你只需要改变shape.draw，因为填充的'type'在构造函数中无关紧要。所以只需测试填充并相应地绘制：

// Tekent de Shape
Shape.prototype.draw = function(ctx) {
        var locx = this.x;
        var locy = this.y;
        var fill = this.fill ; 
        if (typeof fill == 'string' ) 
        {
          ctx.fillStyle = fill;
          ctx.fillRect(locx, locy, this.w, this.h);
        }
        else
        {
          ctx.drawImage(fill, locx, locy, this.w, this.h);
        }
}

然后在图像加载时我只需添加一个将此图像作为填充的形状：

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var imgNew = new Image();
        imgNew.onload = function(){
s.addShape(new Shape(60,60,imgNew.width,imgNew.height,imgNew));
        }
        imgNew.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

我必须将形状集合s作为全局变量。您还可以看到我在init（）中使用了相同的方案加载后添加图像。

在文件上载问题上将图像添加到HTML5画布

1 个答案: