Tag: kineticjs

KineticJS – 用鼠标自由绘制: 我正在构建一个canvas绘画工具，使用它只需拖动鼠标在canvas上绘制。据我所知，线条是这项工作的最佳方式。所以在鼠标按下时我会创建一个KineticJS Line对象，当用户拖动时，我会在最后一个鼠标位置和当前位置之间添加一个点。注意，我只有一个有多个点的线对象。当用户释放鼠标时，Line已完成，每当您再次单击以绘制更多内容时，我都会创建一个新的线对象。问题在于，如果要绘制文本，请说“我的名字是x”，这将产生许多行对象，每个字符为1（“x”和“i”为2）。有一个更好的方法吗？我的想法是只有一个线对象，并且你只是不能从前一个位置添加一条线，然后当你拖动它时。但我不认为KineticJS Line支持这一点。所以基本上，我可以改进我让用户绘制的方式吗？

在Javascript中获取动力学图像的屏幕坐标？: 我正在编写一个应用程序并使用Kinetic JS库从客户端的计算机加载图像。图像包含在照片对象中，并按如下方式初始化 var photoObj = new Image(); photoObj.onload = function() { var photoImage = new Kinetic.Image({ x: 0, y: 0, image: photoObj, width: photoObj.width, height: photoObj.height, name: “photo”, id: “photo” }); photoGroup.removeChildren(); photoGroup.add(photoImage); 该对象包含在名为photoGroup的Kinetic Group对象中，该对象是先前创建的。 photoGroup = new Kinetic.Group({ x : 0, y : 0, draggable : true, id : “photoGroup” }); photoLayer = […]

Kinetic JS图像放大镜: 我试图遵循这个例子http://www.script-tutorials.com/html5-canvas-image-zoomer/ 我收到以下错误： Object doesn’t support property or method ‘getContext’ 这是我的脚本： stage = new Kinetic.Stage({ container: ‘container’, width: 512, height: 512 }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var yoda = new Kinetic.Image({ x: 0, y: 0, image: imageObj, width: 512, height: 512 }); layer.add(yoda); stage.add(layer); }; imageObj.src […]

Kinetic JS – 试图调整图像大小的问题: 我刚开始使用Kinetic JS。如果你看这个链接：例子一些代码在这里： function update(group, activeHandle) { var topLeft = group.get(“.topLeft”)[0], topRight = group.get(“.topRight”)[0], bottomRight = group.get(“.bottomRight”)[0], bottomLeft = group.get(“.bottomLeft”)[0], image = group.get(“.image”)[0], activeHandleName = activeHandle.getName(), newWidth, newHeight, imageX, imageY; // Update the positions of handles during drag. // This needs to happen so the dimension calculation can use the // handle positions […]

KineticJS事件未针对分组图层的子项触发: 我正在尝试向图像添加点击事件（ Kinetic.Image ）我将添加到KineticJS阶段。当我使用简单的层次结构时，如下所示（测试0），可以成功触发事件。但是，在更复杂的层次结构（测试1）中添加图像时，不会触发事件。我创建了一个演示两种层次结构情况的小提琴。 // The canvas container for the stage var container = $(“#container”).html(“”); // Create the stage var stage = new Kinetic.Stage({ container: container.attr(“id”), width: container.width(), height: container.height() }); // Load image var img = new Image(); img.onload = function() { // Dimensions of the image var w = this.width; […]

使用kineticjs添加新图层后，我无法在图层上编辑文本: 我已经制作了这个http://jsfiddle.net/62Wjc/5/ ，在图层上创建和更改文本但它是静态的。现在我为动态添加字段+添加图层+更改图层制作脚本。我的脚本有三个function，分别是： functionCreateTxt用于创建元素并使用KineticJS创建图层。函数fRField用于删除元素 functionChangeTxt用于更改图层上的文本。这是我的剧本： $(document).ready(function() { var nwValue = []; var nwLayer = {}; var nwTxt = {}; var tulisan = ‘Your text here’; var con = $(‘#idEditor’); var cW = con.width(); var cH = con.height(); var stage = new Kinetic.Stage({ container: ‘idEditor’, width: cW, height: cH }); $(‘a[data-selector=”get_new_txt”], a[data-selector=”get_new_img”]’).on(‘click’, function(event){ […]

将多个图像从工具栏拖放到canvas上: 我正在创建一个应用程序，用户可以将多个对象从工具栏拖放到canvas上。将特定对象拖放到canvas上之后，用户可以在canvas中移动该对象.Double单击该对象将使其成为可能消失。我已经能够为工具栏中的一个对象实现这一点，如下面的链接所示。 http://jsfiddle.net/gkefk/26/ 要从工具栏拖放多个对象，我在函数DragDrop（）中添加了以下内容 var image2 = new Kinetic.Image({ name: data, id: “image”+(imageCount++), x: x, y: y, image2: theImage2, draggable: true }); image2.on(‘dblclick’, function() { image2.remove(); layer.draw(); }); layer.add(image2); layer.draw(); var image3 = new Kinetic.Image({ name: data, id: “image”+(imageCount++), x: x, y: y, image3: theImage3, draggable: true }); image3.on(‘dblclick’, function() { image3.remove(); layer.draw(); }); layer.add(image3); layer.draw(); […]

使用JQuery的KineticJS动画: 我是KineticJS的新手，我已经堆积了。我想使用一个不透明的简单动画，但我发现它看起来没那么“简单”。我用KineticJS阅读了关于动画的文档（你不会对本教程说简单）。我想知道有没有一个简单的方法来使用像JQuery或JCanvaScript这样的KineticJS来制作动画？例如 this.animate({ opacity:0, x: 50 }, 500); 这样的事情？如果没有，我们可以使用KineticJS和JQuery来简化动画吗？我发现这个项目有一段非常有趣的代码： $(logo.getCanvas()).animate({ opacity: 1, top: “+=50px” }, 1000); 所以大家你觉得呢？使用这种方法有问题吗？

如何用kineticjs 5.1.0制作橡皮擦作用于多层？: 我想用kineticjs制作橡皮擦，但我有一些问题。橡皮擦需要在多层（我的代码中的layerA，layerB）上有效，并且使用简单的按钮或一些复选框，我可以选择橡皮擦是否可以在第一层或第二层上工作，为什么不在所有层上工作。我还需要保持它们的可拖动性。她是一个小伙子，展示了我所解释的内容： http://jsfiddle.net/junkees/jA2V8/2/ var stage = new Kinetic.Stage({ container: ‘container’, width: 400, height: 500 }); var layerA = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var x = new Kinetic.Image({ x: 0, y: 0, image: imageObj, draggable:false }); // add the shape to the layer layerA.setListening(false); layerA.add(x); // add […]

Jquery图像镜头 – 动力学JS图像ID: 我想在Kinetic JScanvashttp://jsfiddle.net/user373721/7f8qM/15/上使用jquery图像镜头。我遇到的挑战是如何在canvas中找到图像的id，我试过： myImage.onload = function () { var yoda = new Kinetic.Image({ x: 0, y: 0, image: myImage, width: 400, height: 400, id: ‘thumb’ }); layer.add(yoda); layer.draw(); }; myImage.src = ‘http://sofzh.miximages.com/jquery/yoda.jpg’; $(‘#thumb’).imageLens({ lensSize: 200 }); 没有运气，我将非常感谢你的建议，谢谢。