Tag: kineticjs

使用KineticJS在鼠标hover时重新塑造形状: 我有一个帆布，可容纳中等到大量的形状（50-500）。我成功地使用这些工具绘制了我想要的形状轮廓： function DrawPolygon(diagramLayer, polygon) { var diagramImage = new Kinetic.Shape(function () { var context = this.getContext(); context.beginPath(); context.lineWidth = 1; context.strokeStyle = “#ff0000”; var lastVertice = polygon.Vertices[polygon.Vertices.length – 1]; context.moveTo(lastVertice.X, lastVertice.Y); for (var i = 0; i < polygon.Vertices.length; i++) { var vertice = polygon.Vertices[i]; context.lineTo(vertice.X, vertice.Y); } context.stroke(); context.closePath(); }); diagramImage.on("mouseover", function () […]

KineticJS中的约束/比例缩放: 当拖动图像的4个角手柄中的任何一个时，图像应按比例向上或向下缩放。问题：我目前的尝试如下面链接的jsfiddle所示，当topLeft句柄垂直拖动时，图像按比例topLeft ，但另一个处理闪烁。当水平拖动相同的topLeft手柄时，图像只是移动而不resize。如何使用KineticJS实现比例缩放？谢谢！！！ jsfiddle： http ： //jsfiddle.net/zb3Km/

在KineticJS中检测点击阶段而不是形状: 在KineticJS中，如何检测Click事件，其中单击发生在对象/形状之外？我试图让一个Rect在用户点击它时将其比例改为2当用户点击它之外的任何地方时返回到1的比例。 JSfiddle： http ： //jsfiddle.net/ABTAD/8/ 管理以检测舞台上的点击，但点击Rect也会触发点击处理程序!!! 不知怎的， .setScale(1)没有做任何事情，而console.log打印出来的东西。当在Rect而不是空阶段上进行单击时，如何防止单击处理程序触发？ JS Code检测点击阶段 window.stage.getContainer().addEventListener(‘click’, function(e) { $.each(window.layer.get(‘.box’), function(index, box) { box.setScale(1); console.log(‘clicked on stage’); }); });

使用带有kineticJs的jquery draggable UI来使元素对齐网格？: 我是jquery的新手我已经使用Kinetic.js实现了拖放操作我在html中有一些图像并且我将它们传递给javascript函数并使它们可拖动。有两组图像..现在我想要如果它们靠近，它们会互相对齐。我是jquery的新手所以我不知道怎样才能将动能js图像变量传递给jquery操作，他们已经传递了img id标签。此外，我无法弄清楚jquery函数的放置位置以及如何… 这是代码..有人请帮忙.. canvas { border: 1px solid #9C9898; } #img { position:absolute; left:700px; top:150px; } #img1 { position:absolute; left:800px; top:150px; } 加载jquery库 Kinetic.js-加载图像并使em可拖动 function drawImage(imageObj){ var stage = new Kinetic.Stage(“container”, 578, 500); var layer = new Kinetic.Layer(); var x = stage.width / 2 – 200 / 2; var y = stage.height / […]

创建向量和冲突: 我有一个球和一根棍子（用于台球比赛）。首先将球放在桌子的位置。点击球时，棒子会出现，这样我们就可以通过点击球来确定棒的放置角度（点击时我们确定鼠标相对于球心的角度，并将棒放在那个角度接触球）。所以现在棍子也在桌子上。现在我只是沿着那个角度拖动棍子，如果拖动的角度不是初始角度，则返回false。在拖动结束时，我正在计算由杆移动的距离，并且杆返回到接触球的初始位置。然后我试图相对于棍子的角度和棍子移动的距离移动球。球在这里移动但不是关于这些中的任何一个。这已成为我的问题，我在这里更新了小提琴： strikerGroup.on(‘dragend’, function () { var strikerLastPos = strikerGroup.getAbsolutePosition(); strikerGroup.setPosition(initStrikerGrpX, initStrikerGrpY); striker.speedX = striker.speedY = 2; var strikerGrpDistMoved = Math.sqrt(((strikerLastPos.x – strikerGroup.getAbsolutePosition().x) * (strikerLastPos.x – strikerGroup.getAbsolutePosition().x)) + ((strikerLastPos.y – strikerGroup.getAbsolutePosition().y) * (strikerLastPos.y – strikerGroup.getAbsolutePosition().y))); var newX = striker.getX() + (Math.cos(theta) * strikerGrpDistMoved); var newY = striker.getY() – […]

如何使用Jquery停止所有音频播放: 我正在使用jquery mobile更新页面中的div以播放一些动画。动画也通过使用document.createElement(‘audio’);播放声音document.createElement(‘audio’); 我的问题是，当我将页面更新为另一个动画时，旧的声音继续播放。对不起，这是我的第一个问题，如果我似乎没有正确地说它，我道歉。这是我的代码.. 这是要加载到#animation div中的动画的代码 body { margin: 0px; padding: 0px; } /*BABY SCENE*/ var stage = new Kinetic.Stage({ container: ‘container’, width: 578, height: 400 }); var babyLayer = new Kinetic.Layer(); var backLayer = new Kinetic.Layer(); var imageObj = new Image(); var backObj = new Image(); imageObj.onload = function() { var baby […]