0

我在理解 kinetic.js 时遇到了一些问题（文档对于新手来说太可怕了......）我希望我能用我糟糕的英语来解释它。

问题 1：每次我 #reset 我的画布时，它并没有真正重置它。它更像是将另一个背景图像推到实际画布上，当我单击它时，它会跳回原始图像...

function clearCanvas() {
context.clearRect(0, 0, 1000, 1000);   //whole canvas
context.drawImage(buehneObj,0,0);      //redraw the main background image
}

并调用它：

reset = document.getElementById('reset');
document.getElementById('reset').onclick =function(){clearCanvas();
}

问题 2：我为缩放图像而构建的滑块根本不起作用，但我没有看到问题... ...变量是全局的，如果我测试警报，我会看到值存在...

标准jQuery滑块：

$('#scaleslider').slider({
        animate: "fast",
        step: 0.1,
        value: 1,
        min: 0.1,
        max: 1,
        slide: function(event,ui){groesse = ui.value} //global variable
});

我将其隐藏（显示：无）并单击“阻止”

var scaleslider = document.getElementById('scaleslider').style;
document.getElementById('resize').onclick =function(){ scaleslider.display ="block";}

这是动力学部分的样子（dragMotiv 是我的第一个起始图像）“groesse”是我的 x 和 y 滑块值的变量（它们可以使用相同的值，因此它可以正确缩放）：

var dragMotiv = new Kinetic.Image({
      image: imageObj,
      x: 250,
      y: 300,
      width: 330,
      height: 263,
      rotationDeg: 0,
      scale: { x:groesse, y:groesse },
      draggable: true,
      dragBoundFunc: function(pos) {

        var newY = pos.y < 290 ? 290 : pos.y > 305 ? 305 : pos.y;
        var newX = pos.x < 250 ? 250 : pos.x > 390 ? 390 : pos.x;
        return {
          x: newX,
          y: newY
        };
      }
    });

问题3：根本不可能保存。

我把它上传到我的服务器，让你们看看。我知道有一件小事我只是看不到（我希望如此）。

http://manufaktur13.de/playground/canvas_kinetic.html

4

1 回答 1

0

我认为你不应该清除画布，而是应该记录你淹死的东西并移除这些项目，然后重新绘制图层。

于 2013-10-08T09:44:13.803 回答