标签: kineticjs

我喜欢KineticJS,它的速度,与GSAP的结合,但是让我头脑旋转的方法有一种方法可以像FabricJS那样自由地转换KineticJS对象吗？以下是我想说的链接参考:http: //fabricjs.com/customization/我不想使用FabricJs,因为它非常慢,而且它的低性能可以从各种单元测试中看出来.

我真的很期待找到一种能够在KineticJS中自由变换物体的方法,因为它会让生活变得更加轻松.

有办法吗？

谢谢你的帮助,Praney

嘿,我正在使用Kineticjs实现拖放操作现在我希望图像在相邻时能够互相捕捉..我在KineticJs看到了海滩上的动物示例,这对我的功能没什么帮助,然后看到了jquery snap如果我使用那个,那么我将不得不摆脱KineticJs.是什么方式实现jquery snap属于kineticJs中的元素导致在jquery中他们已经传递了img的id以使其可拖动然后按下.那么如何在我的kinetic.js图像中使用它

jquery draggable:http://jqueryui.com/demos/draggable/#snap-to

kinetic.js:http://www.kineticjs.com/

谢谢

阿希什

我在动力画布上有各种可拖动的组.我需要让用户删除其中一些组.

第一个问题是如何从画布中实际删除组(及其所有部分).

第二种是用于允许用户这样做的UI交互.我想绑定dragend,检查一些条件(例如对象的位置或某个模态变量),如果条件满足则删除组.有更好的建议吗？

希望这里有一个简单的问题:

假设我使用KineticJS绘制一条线,如下所示:

var redLine = new Kinetic.Line({
      points: [73, 70, 340, 23, 450, 60, 500, 20],
      stroke: "red",
      strokeWidth: 15,
      lineCap: "round",
      lineJoin: "round"
    });

它已添加到已添加到舞台的图层中.

但是现在我需要完全删除这一行,好像它从来没有对某些用户事件作出反应.我该怎么做呢？

我已经切换到kineticJS,我正在尝试重复自己的背景图像.这是我正在使用的代码:

var background_image = new Image();
background_image.onload = function() {
    var image = new Kinetic.Image({
        image: background_image,
        width: this.width,
        height: this.height
    });
    mainLayer.add(image);
    stage.add(mainLayer); // now mainLayer is available
};

现在我想要做的就是本教程的作用: http://www.html5canvastutorials.com/tutorials/html5-canvas-patterns-tutorial/:

该教程使用canvas/context对象重复图像.我在文档中找不到图像重复,所以我想知道是否可以访问我的舞台(或图层？)的主要上下文元素,然后使用与教程类似的内容.

我是Kintetic.js的新手,我正在尝试做网格.宽度为800px,高度为400px.我想要方块(20x20)来覆盖那个区域.每个方格都有1px边框.所以像这样:

var box = new Kinetic.Rect({
  width: 20,
  height: 20,
  fill: 'transparent',
  stroke: 'rgba(0, 0, 0, 0.02)'
});

为了填充画布,我有一个像这样的糟糕的for循环:

for (var i = 0; i <= this.field.getWidth(); i = i + 20) {
  for (var i2 = 0; i2 <= this.field.getHeight(); i2 = i2 + 20) {
    var cbox = box.clone({x: i, y: i2});
    this.grid.add(cbox);
  }
}

this.grid是一个Kinetic.Layer.这段代码的第一个问题是它非常慢,在网格显示之前我得到了500ms的延迟.但最糟糕的是,如果我在cbox上放置一个mouseover和mouseout事件来改变填充颜色,那真的很慢.我是这样做的:

cbox.on('mouseover', function () {
  this.setFill('black');
  self.grid.draw();
});

cbox.on('mouseout', function () {
  this.setFill('transparent');
  self.grid.draw();
});

所以我的问题是如何改进代码和性能呢？

我有以下例子来创建一个多边形:

            var poly = new Kinetic.Polygon({
                x: coorx,
                y: coory,
                points: coords,
                alpha: 0,
                fill: colors[Math.floor(Math.random() * colors.length)],
                name: myname
            }); 

我想要做的是有两个类名,例如"rect-1"和"rect-2".我希望其中一些形状具有其中一个类,一些将同时具有这两个类.

这一点的关键是能够使用get()语法以一种方式转换某些形状,例如以不透明度转换,以及以其他方式转换其他形状,例如:

是否可以为高级选择赋予形状多个"类"名称,如我在此描述的那样？

谢谢!

    var shapes = stage.get(".rect-1");

    for(var n = 0; n < shapes.length; n++) {
        var shape = shapes[n];

        shape.transitionTo({
            alpha: (opacities[Math.floor(Math.random() * opacities.length)] * 1.5) + .7,
            duration: 2
        });                 
    }

    var shapes = stage.get(".rect-2");

    for(var n = 0; n < shapes.length; n++) {
        var shape = shapes[n];

        shape.transitionTo({
            offset: {
                x: 10,
                y: …

如何在KineticJS中反复从左向右移动图像？

另外,如何更改动画循环的速度？

我有一个问题让我的KineticJS动画停止().

我在同一层上有三个KineticJS图像对象,我已经为每个KineticJS图像对象添加了一个KineticJS动画.但是,只有一个图像对象显示任何动画.它也不会停止响应anim.stop()的动画,除非我停止()所有三个对象(包括那些实际上没有视觉动画的动画)的动画.

我的问题是:是否可以在单个图层上添加多个独立动画到单个图层,并且仍能够单独启动()/停止()每个动画？或者我是否需要为每个KineticJS图像对象创建单独的图层？

简而言之(黑客版本),我的代码如下:

stage = new Kinetic.Stage({container: "container", width: windowWidth, height: windowHeight});

layer = new Kinetic.Layer();

var kinObjArr = [];

for (var i=0; i < 3; i++) {
    kinObjArr[i] = new Kinetic.Image({image: myHTMLImage});

    kinObjArr[i].anim = new Kinetic.Animation({
        func: function(frame) {
            kinObjArr[i].setX(30 * Math.sin(frame.time * 2 * Math.PI / 500) + 100);
        },
        node: layer
    });

    kinObjArr[i].anim.start();

    kinObjArr[i].on('touchstart', function(){
        this.anim.stop();    // <----- Doesn't stop
        layer.draw();
    });

} // for

stage.add(layer);

基本上只有列表中的最后一个KineticJS图像将被动画化,并且只有在触摸/点击所有3个图像时才能停止它.

我对CANVAS和Kineticjs都很陌生,但我觉得我正在尝试的事情应该比我做得更容易.基本上这是我到目前为止:

我试图使用的代码来自kineticjs当与另一个解决方案重叠时停止拖动到一个形状但是无法让它工作.

请查看实时jsfiddle 代码

var isRectCollide = function(target, box) {
  if (target.x - target.width  >= box.x + box.width  &&
  target.y - target.height >= box.y + box.height &&
  target.x + target.width  <= box.x + box.width  &&
  target.x + target.height <= box.y - box.height )
    return false;
  else
    return true;
}

这个想法是粉红色的方块可以拖动,但被橙色框阻挡,一旦拖动橙色框,粉红色框"触摸"蓝色框,弹出应该发生.

我不确定使用kineticjs是否是最简单的实现方法呢？

任何想法,提示或帮助我都会非常感激.

我试图通过点击按钮在我的kineticjs阶段更改图像的src.

我有一个可拖动的图像(在这种情况下是darth-vader)和顶部的静态图像(在这种情况下是猴子).单击一个按钮,我希望能够用新的替换可拖动的图像(yoda)

JSFiddle可以在这里看到:

http://jsfiddle.net/SkVJu/33/

我想到了以下几点:

btn.addEventListener("click", function (event) {
    mainImage.src = path+'yoda.jpg';
    layer.removeChildren();
    draw(mainImage,true);
    draw(foregroundImage,true);

});

将完成它:首先通过更新src,然后删除所有对象并以正确的顺序重新绘制它们.

出于某种原因,虽然我得到了2张yoda图像放在舞台上 - 1正确落后但另一个高于其他一切......

我有一块帆布

function initStage(images) {

    var stage = new Kinetic.Stage({
        container: "container",
        width: 550,
        height: 550
    });

和保存按钮

   $('#save').click( function() {

   stage.toDataURL(function(dataUrl) {
   $.ajax("ajax.php", { data: dataUrl },

    function(data) {
        alert("Your Design Was Saved To The Server");
    }); }); });

和ajax.php

$png =$_POST['data'];
$filteredData=substr($png, strpos($png, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'image.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

如何将dataURL保存到我的数据库？