Question

我的舞台上有一条垂直线和一条水平线和一个圆圈，当我移动任一条线时，试图让圆圈居中于两条线的中心位置，这是我的脚本不起作用：

        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();
        });

我很感激您的建议，提前谢谢

Answer 1

让你的圆圈保持十字准线

我可以建议您使用更简单的代码版本吗？

如果只是编码圆圈以在两条线的交叉点自动重绘自己，而不是维持2组并在两组之间移动圆圈。

因此，当用户移动您的GreenLine1或BlueLine1时，只需将您的circle1移动到“十字准线”的交叉点即可。

首先，在circle1中添加一个自定义drawFunc，使其始终在十字准线中绘制：

    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>

当其他对象移动时，KineticJS会动态更改对象的位置

1 个答案: