javascript – 将AngularJS与KineticJS一起使用
作者：互联网
我们如何使用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,当你有大量的对象,每个对象都有自己的文本框时会更容易)
解决方法:
尝试将KineticJS与AngularJS结合使用时,您遇到了一些集成问题
AngularJS非常擅长绑定DOM元素.
但KineticJS对象不是DOM元素 – 它们只是画布上的像素.
因此AngularJS无法直接控制动力学对象.
要使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>
标签：kineticjs,javascript,angularjs 来源： https://codeday.me/bug/20190723/1508503.html