1

ステージ上に垂直線と水平線と円があり、どちらかの線を移動するときに2本の線のコルソアの中心に円を維持しようとしています。これが機能しないスクリプトです。

        var cy = 512;
        var cx = 512;
        var gy = 0;
        var gx = 0;
        var stage1 = new Kinetic.Stage({
            container: 'container',
            width: 1024,
            height: 1024
        });
        var layer = new Kinetic.Layer();
        var circle = new Kinetic.Layer();
        var circle1 = new Kinetic.Circle({
            x: cx + gx,
            y: cy + gy,
            radius: 140,
            stroke: '#00ffff',
            strokeWidth: 4,
            opacity: 0.5
        });
        circle.add(circle1);

        var GreenLine1 = new Kinetic.Line({
            points: [0, 512, 1024, 512],
            stroke: 'green',
            strokeWidth: 4,
            lineCap: 'round',
            lineJoin: 'round',
            opacity: 0.3
        });

        var BlueLine1 = new Kinetic.Line({
            points: [512, 0, 512, 1024],
            stroke: '#0080c0',
            strokeWidth: 4,
            lineCap: 'round',
            lineJoin: 'round',
            opacity: 0.5
        });

        var bgroup1 = new Kinetic.Group({
            draggable: true,
            dragBoundFunc: function (pos) {
                return {
                    x: pos.x,
                    y: this.getAbsolutePosition().y
                }
            }
        });
        var ggroup1 = new Kinetic.Group({
            draggable: true,
            dragBoundFunc: function (pos) {
                return {
                    x: this.getAbsolutePosition().x,
                    y: pos.y
                }
            }
        });
        bgroup1.add(BlueLine1);
        ggroup1.add(GreenLine1);
        layer.add(bgroup1);
        layer.add(ggroup1);
        stage1.add(circle);
        stage1.add(layer);
        BlueLine1.on('mouseover', function () {
            document.body.style.cursor = 'e-resize';
        });
        BlueLine1.on('mouseout', function () {
            document.body.style.cursor = 'default';
        });
        GreenLine1.on('mouseover', function () {
            document.body.style.cursor = 'n-resize';
        });
        GreenLine1.on('mouseout', function () {
            document.body.style.cursor = 'default';
        });

        ggroup1.on('dragend', function (event) {
        var gy = ggroup1.getPosition().y;
        circle.draw();
        });
        ggroup1.on('dragstart', function (event) {
        circle1.moveTo(ggroup1);

        });
        bgroup1.on('dragstart', function (event) {
        circle1.moveTo(bgroup1);
        });
        bgroup1.on('dragend', function (event) {
         var gx = bgroup1.getPosition().x;
         circle.draw();
        });

よろしくお願いします。

4

1 に答える 1

2

あなたの十字線であなたの円を保つ

コードのより単純なバージョンを提案してもいいですか？

2つのグループを維持し、2つのグループ間で円を移動する代わりに、2つの線の交点で自動的に再描画するように円をコーディングするのはどうでしょうか。

したがって、ユーザーがGreenLine1またはBlueLine1を移動するときは、circle1を「十字線」の交点に移動するだけです。

まず、カスタムdrawFuncをcircle1に追加して、常に十字線で描画するようにします。

    drawFunc: function(canvas) {
      var context = canvas.getContext();
      var centerX=BlueLine1.getPosition().x;
      var centerY=GreenLine1.getPosition().y;
      context.beginPath();
      context.arc(centerX, centerY, this.getRadius(), 0, 2 * Math.PI, false);
      context.lineWidth = this.getStrokeWidth();
      context.strokeStyle = this.getStroke();
      context.stroke();
    },

次に、ユーザーがいずれかの線をドラッグするたびに、circle1をトリガーして自分自身を再描画します。

    // keep circle in center of crosshairs
    stage1.getDragLayer().afterDraw(function() {
      layer.draw();
    });

コードとフィドルは次のとおりです：http：//jsfiddle.net/m1erickson/cgF8y/

<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

    function init(){

        var cy = 512/2;
        var cx = 512/2;
        var gy = 0;
        var gx = 0;
        var stage1 = new Kinetic.Stage({
            container: 'container',
            width: 1024/2,
            height: 1024/2
        });
        var layer = new Kinetic.Layer();
        stage1.add(layer);

        var circle1 = new Kinetic.Circle({
            drawFunc: function(canvas) {
              var context = canvas.getContext();
              var centerX=BlueLine1.getPosition().x;
              var centerY=GreenLine1.getPosition().y;
              context.beginPath();
              context.arc(centerX, centerY, this.getRadius(), 0, 2 * Math.PI, false);
              context.lineWidth = this.getStrokeWidth();
              context.strokeStyle = this.getStroke();
              context.stroke();
            },
            x: cx + gx,
            y: cy + gy,
            radius: 140/2,
            stroke: '#00ffff',
            strokeWidth: 4,
            opacity: 0.5
        });
        layer.add(circle1);

        var GreenLine1 = new Kinetic.Line({
            points: [0, 512/2, 1024/2, 512/2],
            stroke: 'green',
            strokeWidth: 4,
            lineCap: 'round',
            lineJoin: 'round',
            opacity: 0.3,
            draggable:true
        });
        layer.add(GreenLine1);

        var BlueLine1 = new Kinetic.Line({
            points: [512/2, 0, 512/2, 1024/2],
            stroke: '#0080c0',
            strokeWidth: 4,
            lineCap: 'round',
            lineJoin: 'round',
            opacity: 0.5,
            draggable:true
        });
        layer.add(BlueLine1);

        // keep circle in center of crosshairs
        stage1.getDragLayer().afterDraw(function() {
          layer.draw();
        });



        BlueLine1.on('mouseover', function () {
            document.body.style.cursor = 'e-resize';
        });
        BlueLine1.on('mouseout', function () {
            document.body.style.cursor = 'default';
        });
        GreenLine1.on('mouseover', function () {
            document.body.style.cursor = 'n-resize';
        });
        GreenLine1.on('mouseout', function () {
            document.body.style.cursor = 'default';
        });

        layer.draw();

    } // end init();

init();

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

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-03-19T19:21:50.523 に答える