标签: kineticjs

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

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

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

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

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

提前致谢!

我有一个帆布,可容纳中等到大量的形状(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 () {
    });

    diagramLayer.add(diagramImage);
    planViewStage.add(diagramLayer);
}

我想在mouseOver上将diagramImage的context的strokeStyle更改为不同的颜色.据我所知,canvas元素没有跟踪'state',因此,不知道它当前有一个形状.

我想知道一些事情:

1. 关于Canvas的上述事实是否适用于Kinetic的图层元素？
2. 看起来我需要清除diagramImage的上下文并使用不同的颜色重绘 - 这会导致鼠标悬停闪烁吗？
3. 在我当前的形状下面绘制另一种颜色的形状是否有益？然后我可以将形状隐藏在顶部 - 也许通过修改z指数 - 看似"改变"形状的颜色？
4. 如果3为真,那么将500个元素加倍到1000会有任何性能问题吗？

有人可以向我解释一下吗？

var diagramImage = new Kinetic.Shape(function () {
    var context = this.getContext();
    context.beginPath();
    context.lineWidth = 1;
    //This is crazy tricks. It's part of the KineticJS demo website, but how am I able to assign diagramImage.color here?
    context.strokeStyle = diagramImage.color;

    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在Kinetic构造函数返回之前不存在,但我能够(并且似乎需要)在创建之前将上下文指定strokeStyle为diagramImage颜色diagramImage？为什么这样做？

编辑:完整代码:

function DrawPolygon(diagramLayer, polygon) …

我环顾互联网并没有发现任何东西,我看过其他KineticJS示例,它们在矩形上使用了strokeWidth 1,它们看起来都是半透明的2像素线,而不是一条漂亮的1px不透明黑线.

现在,我猜测Google没有任何解决方案真的很简单或不可能,但是......你知道如何使用KineticJS获得一个px边框吗？

$(window).load(function(){
    var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400});
    var layer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({
        x: stage.attrs.width/2, y: stage.attrs.height/2,
        width: 100, height: 100,
        fill: "#eee", stroke: "black", strokeWidth: 1
    });

    layer.add(rect);
    stage.add(layer);
});

有人有任何想法吗？

使用KineticJS,是否有可能仅将该函数绑定一次？和jQuery相同......

例如.在jQuery中

// bad
$('.wrap a').on('click', myHandler);
// good
$('.wrap').on('click', 'a', myHandler);

我也想和KineticJS一起做这件事,因为会有很多对象.

我正在使用KinectJS根据鼠标移动绘制线条.当用户按住鼠标按钮时,我希望它是该行的"开始"点,当用户释放时,它将是该行的"结束",但是当他们按住鼠标时我想要能够在鼠标移动时动态重绘线条.这可能吗？

如何Stage移除KineticJS ？

问题: stage.removeChildren()成功删除其子项layers.但是stage.remove()没有移除舞台,如下面的jsfiddle所示,console.log(stage)删除它后仍显示舞台尚未被删除!

.kineticjs-content与a一起创建的div Kinetic.Stage也在.remove()执行后保留.

jsfiddle: http ://jsfiddle.net/jfaUg/

我想编写一个简单地在屏幕上放置矩形的应用程序.但我需要将kinetic.js和backbone.js结合起来,我不确定是否可以完成.动力学代码是:

 document.getElementById('rect').addEventListener('click', function() {
    rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50,25],
    draggable: true,
  });

和骨干代码

$(function() {
var Shape = Backbone.Model.extend({
defaults: { x:50, y:50, width:150, height:150, color:'gray' },
setTopLeft: function(x,y) { this.set({ x:x, y:y }); },
setDim: function(w,h) { this.set({ width:w, height:h }); },
isCircle: function() { return !!this.get('circle'); }
});

*我添加了.html文件这些路径

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>

我只想在骨干中放置动力学部分而不是默认值.可能吗？

我正在使用动画模块使用Kineticjs运行动画.现在我注意到Chrome和Firefox之间存在很大的性能差异.看一下帧率我发现了以下结果.

     Chrome    Firefox
avg:     50         50
min:     33         20
max:     56         75

如您所见,FireFox的帧率变化要大得多.Chrome中的动画是流畅的(至少足够平滑),但Firefox中的动画每隔一秒左右就会出现波动,这种情况发生在帧速率很高或很低时.

特别是高帧率尖峰似乎破坏了平滑动画的外观.

有没有其他人经历过这种行为？有没有办法在Firefox中更好地平滑帧速率？