我们如何使用 AngularJS 将 KineticJS 对象绑定(bind)(双向)到某些数据？
例如，将动态形状的位置绑定(bind)到变量或文本框。
我已经想出了如何在没有 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，当你有大量对象时，每个对象都有自己的文本框，这会容易得多)
最佳答案
在尝试将 KineticJS 与 AngularJS 结合时遇到一些集成问题
AngularJS 擅长绑定(bind) DOM 元素。
但是 KineticJS 对象不是 DOM 元素——它们只是 Canvas 上的像素。
所以 AngularJS 不能直接控制 Kinetic 对象。
要让 Kinetic 对象响应文本输入变化而移动，您可以使用 AngularJS Controller 并调用 Kinetic 对象的 setX/setY。
要在拖动 Kinetic 对象时更改文本输入值，您可以从 Kinetic dragmove 事件处理程序中调用 AngularJS Controller 。
一个复杂的问题是，默认情况下，Angular 和 Kinetic 都希望出于自己的目的控制鼠标事件。
我不是说这不能完成，但是...
集成 KineticJS + AngularJS 比您已有的 Kinetic + jQuery 方法更复杂。
在你放弃 Kinetic + jQuery 之前
查看这段集成了您的 Kinetic 对象和文本输入的代码。
您可以根据需要快速创建任意数量的形状+文本对。
并且每一对都会自动集成，因此无论是拖动还是文本输入都会移动形状并在文本输入中显示当前位置。
顺便说一句，为了方便起见，我在这里使用了 jQuery，但您可以非常轻松地将其转换为纯 javascript，根本不需要任何外部库。
这是代码和 fiddle :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>
关于javascript - 将 AngularJS 与 KineticJS 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19067997/