Question

我在理解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

Answer 1

我认为你不应该清除画布，而是应该记录下你所淹没的内容并删除这些项目，并重新绘制图层。

kinetic.js有很多令人困惑的问题

1 个答案: