Question

嗨，我遇到了一个问题，我想用拖动器调整圆圈的大小。圆半径应在0到100的范围内，因为圆的大小应为百分比值。一切正常，只有我的代码看起来有点复杂，当我想要一些更大的调整圈。

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        canvas {
            border: 1px solid #9C9898;
        }
        #container {
            display: inline-block;
            overflow: hidden;
            height: 600px;
            width: 700px;
            border: 1px dotted black;
            margin-left: 300px;
        }
    </style>
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
</head>

<body>
<div id="container"></div>

<script defer="defer">
    var updatekeyword1 = function() {
        var x = draggerKeyword1Group.getPosition().x;
        keyword1Circle.setRadius(keyword1Radius + x-580);
        console.log(x-300);
    };
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 700,
        height: 600
    });

    var layer = new Kinetic.Layer();

    /*
     * dragger
     */
    var dragCircle = new Kinetic.Circle({
        radius: 15,
        fill: 'black',
        stroke: 'black',
        strokeWidth: 3

    });
    var dragCircleText = new Kinetic.Text({
        x: -19,
        y: -18,
        fontSize: 15,
        fontFamily: 'Titillium Web',
        text: '< >',
        fill: 'white',
        padding: 10
    });

    /*
    *   Keywords
    */

    // keyword1
    var keyword1x = stage.getWidth()/2+200;
    var keyword1y = stage.getHeight()/2-100;

    var keyword1Radius = 30;
    var keyword1MinRadius = 10;
    var keyword1DisctanceMax = 100-keyword1Radius;


    var keyword1Group = new Kinetic.Group({
        x: keyword1x,
        y: keyword1y
    });

    var keyword1Circle = new Kinetic.Circle({
        radius: keyword1Radius,
        fill: '#358efe'
    });


    /*
     * dragger click event
     */
    var draggerKeyword1Group = new Kinetic.Group({
        x: keyword1Group.getPosition().x+keyword1Radius,
        y: keyword1Group.getPosition().y,
        draggable:true,
        dragBoundFunc: function(pos) {
            var newX = pos.x;
            if(newX < keyword1Group.getPosition().x+keyword1Radius-keyword1Radius+15) {
                newX = keyword1Group.getPosition().x+keyword1Radius-keyword1Radius+15;
            }
            else if(newX > keyword1Group.getPosition().x+keyword1Radius+keyword1DisctanceMax) {
                newX = keyword1Group.getPosition().x+keyword1Radius+keyword1DisctanceMax;
            }
            return {
                x: newX,
                y: this.getAbsolutePosition().y
            }
        }
    });

    draggerKeyword1Group.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    draggerKeyword1Group.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });

    draggerKeyword1Group.on('dragmove', updatekeyword1);

    draggerKeyword1Group.add(dragCircle);
    draggerKeyword1Group.add(dragCircleText);

    keyword1Group.add(draggerKeyword1Group);
    keyword1Group.add(keyword1Circle);


    layer.add(keyword1Group);

    layer.add(draggerKeyword1Group);
    stage.add(layer);

</script>
</body>
</html>

任何帮助都会很棒

Answer 1

我是Kinetic的新手。我甚至不是一个真正的程序员。但我认为你需要分离你的功能...例如，形状都需要成为一个组的一部分。然后，有一个单独的函数，添加一个缩放功能（无论它可能是什么），例如你现在拥有的功能。但是，将其添加到组（形状）中。即：圆形是一个形状。但它必须是一个团体的一部分。然后将句柄添加到同一组中。

像这样：

实际工作示例 http://jsfiddle.net/JSdc2/Cr3xg/2/

注意：不同的形状必须以不同的方式处理，至少在我的解决方案中。

 function addScaleAnchorsTo( group ) {

        if ( group.className == 'Blob' ) {

            var edges = getBlobMinsAndMaxes( group );
            group.width0 = ( edges.maxX - edges.minX );
            group.height0 = ( edges.maxY - edges.minY );

            var offX = (edges.maxX + edges.minX) /2;
            var offY = (edges.maxY + edges.minY) /2;

            addScaleAnchor( group, edges.minX - offX, edges.minY- offY, 'topLeft' );
            addScaleAnchor( group, edges.minX- offX, edges.maxY- offY, 'bottomLeft' );
            addScaleAnchor( group, edges.maxX- offX, edges.minY- offY, 'topRight' );
            addScaleAnchor( group, edges.maxX- offX, edges.maxY- offY, 'bottomRight' );

        }

        if ( group.className == 'Image' ) {
                        console.log('adding scale anchors to Image');
            var width = group.width();
            var height = group.height();
            group.width0 = width;
            group.height0 = height;

             var offX = width /2;
             var offY = height /2;

            addScaleAnchor( group, group.x() - offX, group.y() - offY, 'topLeft' );
            addScaleAnchor( group, group.x() - offX, group.y() + height - offY, 'bottomLeft' );
            addScaleAnchor( group, group.x() + width - offX, group.y() - offY, 'topRight' );
            addScaleAnchor( group, group.x() + width - offX, group.y() + height - offY, 'bottomRight' );

        }


    }

注意：此代码是从实际运行的代码中被黑客攻击的，所以它可能有你不需要的额外内容，但我希望它可以帮助你看到如何做你想要的。

希望这有帮助！

Answer 2

这是一个不同的例子。这是更完整的，但它显示了如何添加任意数量的锚到你想要的形状，只要每个形状添加到一个组'＆＃39;第一

在这种情况下，我添加了一个删除锚点，因为它们不像比例锚点那么复杂。

在我的演示中，锚点在形状中尚未存在，直到你告诉它：

customShape[ID].on('mousedown touchstart', function( e ) { shapeClick ( this, e ); });

与您要查找的内容类似，您可以使用单独的功能将锚点添加到圆圈中。这样你就可以拥有所需数量的圆圈，并在创建圆圈后添加锚点。

工作演示： http://jsfiddle.net/JSdc2/5L3F7/

使用拖动器调整圆形大小

2 个答案: