Question

我正在基于画布创建一个enyo Control。它应该捕获鼠标或手指事件，并将它们绘制到它上面。然而，当我画到画布上时，它只画了一小部分。

请查看jsfiddle，因为它包含所有相关代码。

enyo.kind({
  name: "SignatureControl",
  kind: "enyo.Canvas",

  recording: false,
  points: [],

  handlers: {
    ondown: "startRecord",
    onmove: "record",
    onup: "stopRecord"
  },

  startRecord: function(inSender, inEvent) {
    this.recording = true;

    if(node = this.hasNode()) {
      this.points.push({
        x: inEvent.clientX - node.offsetLeft,
        y: inEvent.clientY - node.offsetTop,
        d: false,
        p: 1
      });
    }
    this.update();
  },

  stopRecord: function() {
    this.recording = false;
  },

  record: function(inSender, inEvent) {
    if( this.recording ) {
    if(node = this.hasNode()) {
      this.points.push({
        x: inEvent.clientX - node.offsetLeft,
        y: inEvent.clientY - node.offsetTop,
        d: true,
        p: 1
      });
    }
      this.update();
    }
  },

  update: function() {
        var canvas = this.hasNode();
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
      this.log(ctx.canvas.width);

      ctx.lineJoin = "round";
      ctx.lineWidth = 1;

      var i = this.points.length - 1; 

      ctx.strokeStyle = "rgba(0,0,0," + this.points[i].p + ")";
      ctx.beginPath();
      if(this.points[i].d && i){
        ctx.moveTo(this.points[i-1].x, this.points[i-1].y);
      }else{
        ctx.moveTo(this.points[i].x-1, this.points[i].y);
      }
      ctx.lineTo(this.points[i].x, this.points[i].y);
      ctx.closePath();
      ctx.stroke();
        }
    }
});

Answer 1

您只能使用画布上的高度/宽度属性，而不能通过CSS调整大小。查看此更新的小提琴http://jsfiddle.net/AFqvD/4/

为什么我的画布绘图区域如此之小？

1 个答案: