个人中心
gpt4 book ai didi

javascript - 将 AngularJS 与 KineticJS 一起使用

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:16:02 26 4
gpt4 key购买 nike

我们如何使用 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，根本不需要任何外部库。

enter image description here

这是代码和 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/

26 4 0
文章推荐： javascript - 谷歌饼图标签
文章推荐： java - 无法在 Eclipse 中创建 Android 应用程序项目。错误消息 - 输入应用程序名称(显示在启动器中)
文章推荐： javascript - 允许范围内的字母数字和点
文章推荐： javascript - ajax成功后删除最近的li
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com