0

我正在尝试使用 html5 画布元素在 durandal 中绘制但没有成功

标记

 <body>
    <canvas id="canvas"></canvas>
 </body>

js

define(function() {

   function viewAttached() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var buffer = document.createElement('canvas');
    buffer.width = buffer.height = 60;
    var bctx = buffer.getContext('2d');
    bctx.translate(30, 30);
    bctx.rotate(0.5);
    bctx.fillStyle = 'rgb(255, 0, 0)';
    bctx.fillRect(-15, -15, 30, 30);

    ctx.fillStyle = 'rgb(0, 255, 0)';
    ctx.fillRect(30, 30, 30, 30);
    ctx.drawImage(buffer, 50, 50);
    }
    var ctor = function () {
    this.viewAttached = viewAttached();
    return ctor;
    };
  });

问题是画布没有加载所以我能看到的只是一个空的画布。相同的代码在jsfiddle中运行良好我的意思是只有jquery和canvas但是当我将它转移到durandal时它不再工作了有人可以帮忙吗？

4

1 回答 1

1

在您提到的评论中，它正在使用 viewAttached()，但实际上在您的问题中，您提到它确实不起作用。我最好的选择是 A：nemesv 是正确的，您可能正在触发该功能，但不是您想要的方式，并且 B：当您调用 viewAttached 时，您的视图实际上并未附加。

这适用于 Durandal 1.2 -

define(function() {

   function viewAttached() {
       // Do stuff
    }
    var viewModel = {
        viewAttached: viewAttached;
    };

    return viewModel;
  });

如果您使用的是 Durandal 2.0，请这样做 -

define(function() {

   function attached() {
       // Do stuff
    }
    var viewModel = {
        attached: attached;
    };

    return viewModel;
  });

假设您正在使用路由器。您不需要触发构造函数，Durandal 会为您处理。您也不需要调用 viewAttached，因为 Durandal 在加载周期的适当位置（在 DOM 准备好之后）处理它 http://durandaljs.com/documentation/Using-The-Router/

于 2013-09-01T21:26:58.933 回答