标签: kineticjs

我正在尝试将事件监听器添加到由Kineticjs管理的Htm5-Canvas (Canvas是通过KineticJS阶段创建的).

我尝试了(使用jQuery):

$(selector).keydown(function(e){...})

使用以下选择器:

• 窗口(它正在工作,但它正在监听整个窗口,从而不好)
• 所有Canvas-Elements $('canvas') < - 不起作用
• 容器,KineticJS及其Canvas嵌入式 < - 无效
• KineticJS的容器Div(由Kinetic创建)与$('.kineticjs-content').keydown(function(){...}) < - 不工作

只有$(窗口)正常工作.在尝试使用简单的Html5-Canvas后,我发现,Canvas-Element内置了对键盘事件的支持.所以我认为,KineticJS正在这里做一些神奇的事情.可以排除错误的选择器使用.

我用这段代码检查了每个Selector:console.log($(selector).length)

有人可以帮忙吗？Thx提前!

我想调整大小,拉伸一个HTML5画布,画布就像一个IMG元素:设置width-height by pixel,percent ...

我想知道是否有任何方法可以将HTML5画布转换/导出到IMG元素,或者某种方式可以直接在画布中实现.

我已经在谷歌上进行了研究,但似乎以前互联网上没有人这么做过,或者我可能无法搞清楚......

我正在使用KineticJS库,了解详情.

请帮我!非常感谢!抱歉我的英语不好......

如果在其他地方被问过这个问题,我很难道歉,因为它很难说,所以我找不到任何东西.

有没有办法在画布上实现蒙版？

例如,仅使用形状(没有图像)我绘制一个带窗口的房子.我也有一个代表一个人的形状.我希望那个人出现在窗口 - 但显然只有窗口允许才能看到这个人.其余的将被掩盖.

我想要清空窗户占据的房子的一部分,这样在层中有一个真正的洞,这使得问题很容易解决.

但是我意识到你不能在画布上删除形状或部分形状,只能在旧东西上绘制新东西.所以在多层次的环境中(我在Kinetic.JS中制作游戏),我到底能做什么？

对不起,如果对此有任何解释不充分 - 对整个图形事物都是新的.

有没有办法可以使用KineticJS在画布上缩放和平移？我发现这个库kineticjs-viewport,但只是想知道是否还有其他方法可以实现这一点,因为这个库似乎使用了这么多额外的库,并且我不确定哪些是完成工作所必需的.

或者,我甚至愿意在感兴趣的区域周围绘制一个矩形并放大到那个特定区域.关于如何实现这一点的任何想法？一个JSFiddle的例子真棒!

我正在尝试使用Canvas和优秀的KineticJS库组合编写我的第一个HTML5游戏,并且我在早期就打了一个墙.

我想要做的是让用户在游戏的框中输入他们的名字.做了一些研究之后,除了在我正在使用的画布部分上获取浮动HTML元素之外,我无法看到任何方法.

它是否正确？

在大量的Flash和网页游戏长大的,我敢肯定,我每次都输入一个名称或保存文件名,它是直接做入游戏本身,它不依赖于HTML产生的呢？

我们将非常感激地提出任何有关如何做到这一点的建议.

KineticJS的主动维护于2014年12月由其创始人停止.曾经在kineticjs.com网站上托管的文档现在返回404.

我在哪里可以找到文档的最新版本？

我在将容器缩放到固定点时遇到了一些问题.
在我的情况下,我正在尝试将一个舞台缩放(缩放)到鼠标光标.

以下是纯画布的一种方法:http: //phrogz.net/tmp/canvas_zoom_to_cursor.html(在Zoom Canvas到Mouse Cursor中讨论过)

在使用KineticJS API时,我无法弄清楚如何应用相同的逻辑.

示例代码:

var position = this.stage.getUserPosition();
var scale = Math.max(this.stage.getScale().x + (0.05 * (scaleUp ? 1 : -1)), 0);
this.stage.setScale(scale);
// Adjust scale to position...?
this.stage.draw();

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. 当我将箭头拖放到另一个组时,它会停止绘制并将两个组边对边连接

像这样的东西:

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