标签: kineticjs

1)是否有任何摘要完成事件,我可以用它来更新我的画布.我有一个角度应用程序,它具有画布对象的不同属性的视图.每当我更改属性时,一旦摘要完成,如果我可以获得摘要完成事件,我可以更新画布(使用kineticJs)重绘具有最新属性的图表.

目前我正在从视图中调用方法

2)我只是在打开对象设置时使用视图并将其路由到新视图.在这种情况下,网址也随着网页/ #view而改变.它只是弹出窗口,我不需要页面末尾的#view,但仍然使用路由和视图概念.还有别的吗？

我实现了一个检测两个形状之间碰撞的函数,以及另一个在检测到碰撞时将dragBound限制为边框的函数,以实现捕捉功能,然后添加到Kinetic.Group.所以实际上我将放置目标限制为现有矩形的边界.

这是一个明确查看我的问题的方法:http://jsfiddle.net/4Y87X/6/

当width = height时,这个逻辑适用于大矩形.但是,当我拖动小灰色矩形(代表我项目中的一个窗口)时,仅在大矩形的右侧和顶部检测到碰撞,未检测到左侧和底部!这是由于DragBoundWindow方法中的一些数学方程吗？

如果有人能找到错误,请？

代码:

var stage = new Kinetic.Stage({
    container: "container",
    width: 900,
    height: 600
});
var leftLayer = new Kinetic.Layer({
    x:0,
    y:0,
    id: 'leftLayer',
    width:250,
    height:600
});
var leftBackground = new Kinetic.Rect({
    width: 250,
    height: 600,
    stroke: "red"
    });
leftLayer.add(leftBackground);
stage.add(leftLayer);

var rightLayer = new Kinetic.Layer({
    x: 280,
    y:0,
    id: 'rightLayer',
    width:600,
    height:600
});
var rightBackground = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 600,
    height: 600, …

我想使用Konvajs来执行以下任务:

1. 在画布上绘制两个矩形组.每个组包含一个矩形,文本和一个圆圈
2. 当我使用鼠标从圆圈拖动时,它会在拖动时绘制箭头.
3. 当我将箭头拖放到另一个组时,它会停止绘制并将两个组边对边连接

像这样的东西:

是否有任何本机方法支持形状之间的连接？有人能告诉我一些例子吗？

我正在尝试为KineticJS构建一个转换管理器,它将构建一个边界框并允许用户在其画布上缩放,移动和旋转图像.我正在绊倒锚点的逻辑.

http://jsfiddle.net/mharrisn/whK2M/

我只是想让用户从任意角落按比例缩放图像,并且还可以按住 - 拖动锚点旋转.

谁能帮助我指出正确的方向？

谢谢!

我目前正在使用phonegap开发一个Android应用程序.我有一个html5画布,我正在绘制和动画对象.它在android 2.3上运行得很好,但在android 4+上它不重绘画布.我尝试将kinetic.js和easel.js/tween.js用于我的动画,并且这两个库都没有清除画布的问题.我在画布上显示并隐藏了一个div,但是它不会一直有效.我只能假设这是一个android 4+特定的bug或某种类型的功能来增强html5画布性能.

有谁知道是否有一些设置我可以改变或我可以调用android 4或javascript的方法,这将允许我在动画期间强制重绘我的html5画布？

还应该注意的是,动画似乎与4.1 google api模拟器中的easel.js/tween.js一起使用(画布清除和重绘),但不适用于运行4.1.1的手机.

我已经对正在发生的事情做了一些进一步的研究.基本上,似乎动画一开始的形状会留下一个神器,clearRect不会清除.我有一个大圈子,我正缩小到一个小圈子.动画仍然会发生,但是在画布上调用clearRect不会影响大圆圈.

好吧,我承认我试图变得聪明:我想如果我覆盖了Shape的drawFunc属性,我可以简单地在矩形内绘制任何内容并仍然使用KineticJS的点击检测.这是我的尝试:

var shape = new Kinetic.Shape({
  drawFunc: function(context) {
    var id = 26;  // Id of a region inside composite image.
    context.beginPath();
    context.rect(0, 0, w, h);
    context.closePath();
    this.fill(context);
    this.stroke(context);
    context.drawImage(copyCanvas, (id % 8) * w, flr(id / 8) * h, 
        w, h, 0, 0, w / 2, h / 2);
  },
  draggable: true
});

因此,想法是绘制一个矩形,并使用drawImage()在矩形顶部绘制一些东西(就像一个纹理,除了它随时更改因为copyCanvas本身更改).与此同时,我预计事件处理(特别是拖放)仍然"正常工作".好吧,接下来会发生什么:我的drawImage()未覆盖的矩形部分正确检测到了点击次数.但是,图像覆盖的矩形的四分之一拒绝响应点击!现在,我的问题是为什么？我挖掘了KineticJS代码,并且向我看来,点击检测只是意味着绘制到缓冲区并查看给定的x,y点是否具有非零alpha.我无法看到我在矩形上方绘制图像会如何影响这一点.

有什么想法发生了什么？

我正在使用带有渐变填充等的KineticJS文本对象作为按钮.但是现在最近删除了verticalAlign属性,如何在边界框中垂直对齐我的文本？如果没有其他选择,为什么要删除该属性？

我正在使用JavaScript库Kinetic.js用于HTML5画布.这是stage.get()从舞台(画布)获取对象的方法.我已经为每个对象分配了id或类名

如果我通过id获取对象var obj = stage.get('#obj_id')它可以工作,但如果尝试通过类名获取多个对象,var objs = stage.get('.obj_class_name')则返回一个空 []对象

如何从舞台上获取多个对象.

我正在开发一个HTML5 Canvas和KineticJS的项目.半透明覆盖(KineticJS组或层)遍布整个场景.问题是:不处理绑定到此叠加层下的KineticJS对象的鼠标事件.

如何使这个叠加(或任何其他对象)对鼠标事件"透明"？

注意:问题只是关于Canvas,没有其他HTML元素干扰它.(以明确下面提到的内容.)

我已经在dom上加载了一个图像,我希望能够将该图像拖动到画布中并将其放入画布并从中创建一个kineticjs对象.

我不知道如何使图像可拖动,我不知道如何使画布对拖放已存在于dom上的事件做出反应.有人能告诉我怎么做吗？

大多数教程都展示了如何从画布或文件系统中拖放,我正在寻找如何从DOM拖动到画布.

背景信息:我想要一个菜单​​系统或一组缩略图,用户可以拖放到画布中以展开照片.

提前致谢!