3

我们如何使用 AngularJS 将（双向）KineticJS 对象绑定到一些数据？
例如，将 Kinetic Shape 的位置绑定到变量或文本框。

我已经想出了如何在没有 AngularJS 的情况下做到这一点：（
使用 KineticJS 和 jQuery）

box.on('dragmove', function() {
    $('#pos_x').val( myShape.getX() );
    $('#pos_y').val( myShape.getY() );
});

$('#pos_x').change(function() {
    var x = parseInt( $('#pos_x').val() );
    var y = parseInt( $('#pos_x').val() );
    box.setPosition( x, y );
});
// and the same for $('#pos_y');

代码说明：
有一个框和两个文本框。
拖动框时，框的坐标将显示在两个文本框上。
当两个文本框的值都改变时，框的位置也会改变

但我想知道如何用AngularJS做到这一点
（IMO，当你有大量对象时会容易得多，每个对象都有自己的文本框）

4

1 回答 1

9

在尝试将 KineticJS 与 AngularJS 结合时，您会遇到一些集成问题

AngularJS 擅长绑定 DOM 元素。

但是 KineticJS 对象不是 DOM 元素——它们只是画布上的像素。

所以 AngularJS 不能直接控制 Kinetic 对象。

要让 Kinetic 对象响应文本输入更改而移动，您可以使用 AngularJS 控制器并调用 Kinetic 对象的 setX/setY。

要在拖动 Kinetic 对象时更改文本输入值，您可以从 Kinetic dragmove 事件处理程序中调用 AngularJS 控制器。

一个复杂的问题是，默认情况下，Angular 和 Kinetic 都希望为自己的目的控制鼠标事件。

我不是说做不到，而是...

集成 KineticJS + AngularJS 比您已经拥有的 Kinetic + jQuery 方法更复杂。

在你放弃 Kinetic + jQuery 之前

查看集成了 Kinetic 对象和文本输入的代码。

您可以根据需要快速创建任意数量的形状+文本对。

并且每一对都会自动集成，以便拖动或文本输入将移动形状并显示文本输入中的当前位置。

顺便说一句，我在这里使用 jQuery 是为了方便，但你可以很容易地将它转换为纯 javascript，根本不需要任何外部库。

在此处输入图像描述

这是代码和小提琴：http: //jsfiddle.net/m1erickson/X9QsU/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>

<style>
body{background:ivory; padding:10px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
.boundXY{
    width:105px;
    height:23px;
    color:white;
    padding:5px;
    border:2px solid lightgray;
}

</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


// each rect,textX,textY gets a unique id
var nextId=0;

// create some rect-textInput pairs in random colors
for(var i=0;i<6;i++){
    randomPair();
}


function randomPair(){
    var x=parseInt(Math.random()*250);
    var y=parseInt(Math.random()*250);
    var w=parseInt(Math.random()*40)+10;
    var h=parseInt(Math.random()*40)+10;
    addRectTextPair(nextId++,x,y,w,h,randomColor(),"lightgray");
}


function addRectTextPair(id,x,y,w,h,fill,stroke){

    // new kinetic rect
    var rect = new Kinetic.Rect({
        id:"rect"+id,
        x: x,
        y: y,
        width: w,
        height: h,
        fill: fill,
        stroke: stroke,
        strokeWidth: 3,
        draggable:true
    });
    rect.on('dragmove', function() {
        var id=this.getId().slice(4);
        $('#x'+id).val( parseInt(this.getX()) );
        $('#y'+id).val( parseInt(this.getY()) );
    });    
    layer.add(rect);

    // new div with same color as kinetic rect
    var div = document.createElement("div");
    div.id="div"+id;
    div.className="boundXY";
    div.style.background = fill;
    div.innerHTML = "X/Y:";
    // add xy text inputs   
    div.appendChild(newTextInput("x"+id,x));
    div.appendChild(newTextInput("y"+id,y));
    // add div to body
    document.body.appendChild(div);

    // change rect's X when the textInputX changes
    $('#x'+id).change(function(e) {
        var id=e.target.id.slice(1);
        var rect=layer.get("#rect"+id)[0];
        rect.setX( parseInt($(this).val()) );
        layer.draw();
    });

    // change rect's Y when the textInputY changes
    $('#y'+id).change(function(e) {
        var id=e.target.id.slice(1);
        var rect=layer.get("#rect"+id)[0];
        rect.setY( parseInt($(this).val()) );
        layer.draw();
    });

    layer.draw();
}


function randomColor(){
    return('#'+Math.floor(Math.random()*16777215).toString(16));
}


function newTextInput(id,value){
    var input=document.createElement("input");
    input.id=id;
    input.value=value;
    input.type="text";
    input.style.width="25px";
    input.style.marginLeft="5px";
    return(input);
}

$("#oneMore").click(function(){ randomPair(); });

}); // end $(function(){});

</script>       
</head>

<body>
    <p>Reposition rectangles by dragging or changing X/Y</p>
    <button id="oneMore">Add another Rect and TextInput pair</button>
    <div id="container"></div>
</body>
</html>
于 2013-09-28T20:31:10.413 回答