Question

我已经开始使用KonvaJS进行项目，但是遇到了麻烦。请参阅http://www.wattsyourwebsite.net/circles/SpinArc.html 我需要执行以下操作： 1.每个“圆”当前有25个相等的部分，但是该数字需要用户配置。我应该从ASP还是PHP开始？ 2.每个包含单词的楔形应该是用户可配置的文本。参见此JSFiddle。问题是只有最里面的圆圈具有可编辑的文本。其余的都去了哪里？

      function addWedge(n, radiusSize, thisColor, numberWedges, thisWheel, words) {

    var angle = 2 * Math.PI / numberWedges;

    var wedge = new Konva.Group({
        rotation: 2 * n * Math.PI / numberWedges,
    });

    var wedgeBackground = new Konva.Wedge({
        radius: radiusSize,
        angle: angle,
        fillRadialGradientStartPoint: 0,
        fillRadialGradientStartRadius: 0,
        fillRadialGradientEndPoint: 0,
        fillRadialGradientEndRadius: radiusSize,
        fillRadialGradientColorStops: [0, thisColor, 1, thisColor],
        fill: '#64e9f8',
        fillPriority: 'radial-gradient',
        stroke: '#ccc',
        strokeWidth: 2
    });

    wedge.add(wedgeBackground);

    var textNode = new Konva.Text({
        text:  words[n],
        fontFamily: 'Calibri',
        fontSize: 16,
        fill: 'white',
        align: 'center',
        stroke: 'white',
        strokeWidth: 1

    });




    textNode.on('dblclick', () => {
        // create textarea over canvas with absolute position

        // first we need to find its positon
        var textPosition = textNode.getAbsolutePosition();
        var stageBox = stage.getContainer().getBoundingClientRect();

        var areaPosition = {
            x: textPosition.x + stageBox.left,
            y: textPosition.y + stageBox.top
        };


        // create textarea and style it
        var textarea = document.createElement('textarea');
        document.body.appendChild(textarea);

        textarea.value = textNode.text();
        textarea.style.position = 'absolute';
        textarea.style.top = areaPosition.y + 'px';
        textarea.style.left = areaPosition.x + 'px';
        textarea.style.width = textNode.width();

        textarea.focus();


        textarea.addEventListener('keydown', function (e) {
            // hide on enter
            if (e.keyCode === 13) {
                textNode.text(textarea.value);
                layer.draw();
                document.body.removeChild(textarea);
            }
        });
    })        
    wedge.add(textNode);
    layer.batchDraw();
    wedge.startRotation = wedge.getRotation();

    thisWheel.add(wedge);
}

编辑后，我需要能够保存状态并重新加载。
每个有颜色的“圆圈”都应该能够由用户更改其颜色。

任何指导将不胜感激！

塔妮娅

KonvaJS：我想创建可编辑的圆形楔形

0 个答案: