Question

我有一个要求，例如当用户点击中心圆时，应该切换外圆，以及当用户点击应该更改中心圆值的外部小圆时。

在用户点击中心圈时，我无法显示如何显示/隐藏部分画布？

有关如何执行此操作的任何帮助？

GenerateCanvas();

function GenerateCanvas() {
    try {
        var FlagCircleCenterCoordinates = new Array();
        var FlagCircles = [];
        
        var CenterX = document.getElementById('canvasFlag').width / 2;
        var CenterY = document.getElementById('canvasFlag').height / 2;

        var OuterTrackRadius = 98;
        var InnerTrackRadius = 70;
        var InnerCircleRadius = 20;

        var FlagElement = document.getElementById("canvasFlag");
        var ObjContext = FlagElement.getContext("2d");

        // Outer track
        ObjContext.fillStyle = "#FFF";
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, OuterTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        ObjContext.fill();

        // Inner track
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();

        // Inner small circle
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerCircleRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        
        //Max 17...other wide need to change the Inner and Outer circle radius
        var FlagImagesArray =  [1, 2, 3,4,5];

        if (FlagImagesArray.length > 0) {
            var StepAngle = 2 * Math.PI / FlagImagesArray.length;
            var FlagCircleRadius = (OuterTrackRadius - InnerTrackRadius) / 2;
            var RadiusOfFlagCircleCenters = OuterTrackRadius - FlagCircleRadius;

            for (var LoopCnt in FlagImagesArray) {
                var CircleCenterCoordinates = new Object();
                
                 CircleCenterCoordinates.PostionX = CenterX + (Math.cos(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);
                 CircleCenterCoordinates.PostionY = CenterY + (Math.sin(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);
                
                ObjContext.beginPath();
                ObjContext.arc(CircleCenterCoordinates.PostionX, CircleCenterCoordinates.PostionY, FlagCircleRadius, 0, 2 * Math.PI);
                ObjContext.strokeStyle = '#CCC';
                ObjContext.stroke();
                ObjContext.fillStyle = 'blue';
                ObjContext.fillText(FlagImagesArray[LoopCnt], CircleCenterCoordinates.PostionX, CircleCenterCoordinates.PostionY); 
                
                FlagCircleCenterCoordinates[LoopCnt] = CircleCenterCoordinates;
                
                var ObjFlagCircle = {
                    Left : CircleCenterCoordinates.PostionX - FlagCircleRadius,
                    Top : CircleCenterCoordinates.PostionY - FlagCircleRadius,
                    Right : CircleCenterCoordinates.PostionX + FlagCircleRadius,
                    Bottom : CircleCenterCoordinates.PostionY + FlagCircleRadius,
                    FlagName : FlagImagesArray[LoopCnt]
                }
                
                FlagCircles[LoopCnt] = ObjFlagCircle;
            }
                        
            $('#canvasFlag').mousemove(function (Event) {
                 debugger;
                $(this).css('cursor', 'auto');

                var ClickedX = Event.pageX - $('#canvasFlag').offset().left;
                var ClickedY = Event.pageY - $('#canvasFlag').offset().top;
                for (var Count = 0; Count < FlagCircles.length; Count++) {
   
                    if (ClickedX < FlagCircles[Count].Right &&
                        ClickedX > FlagCircles[Count].Left &&
                        ClickedY > FlagCircles[Count].Top &&
                        ClickedY < FlagCircles[Count].Bottom) {
                        $(this).css('cursor', 'pointer');
                        break;
                    }
                }
            });
            
            $('#canvasFlag').click(function (Event) {
                 debugger;
                $(this).css('cursor', 'auto');

                var ClickedX = Event.pageX - $('#canvasFlag').offset().left;
                var ClickedY = Event.pageY - $('#canvasFlag').offset().top;
                for (var Count = 0; Count < FlagCircles.length; Count++) {
   
                    if (ClickedX < FlagCircles[Count].Right &&
                        ClickedX > FlagCircles[Count].Left &&
                        ClickedY > FlagCircles[Count].Top &&
                        ClickedY < FlagCircles[Count].Bottom) {
                            ObjContext.fillStyle = "#FFF";
                            ObjContext.beginPath();
                            ObjContext.arc(CenterX, CenterY, InnerCircleRadius - 1, 0, Math.PI * 2);
                            ObjContext.closePath();                        
                            ObjContext.fill();
                        
                            ObjContext.fillStyle = "blue";
                            ObjContext.fillText(FlagCircles[Count].FlagName, CenterX, CenterY); 
                        
                        break;
                    }
                }
            });
        }
    }
    catch (E) {
        alert(E);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="canvasFlag" width="200" height="200">
    Your browser does not support the canvas
</canvas>

Answer 1

哦，伙计。好的，首先，你需要摆脱try / catch语句，它没有做任何事情。

接下来，您需要在函数体之外创建所有这些变量，我们需要能够从另一个函数访问它们

看起来您完成了所有点击功能，而且它也在运行。这很好，只需继续移动以generateCanvas函数之外的jquery开头的两行。他们只需要运行一次，我们需要再次调用生成画布。

第四，创建一个变量来关闭和关闭某个地方的外圆，并且当该变量为真时，只在generateCanvas（）中绘制外环。您还应该在断开之前设置另一个设置为Count的全局变量，以便在重新生成画布时记住它。获取点击功能中的所有代码，用数字绘制内圆，并将其放在生成画布内。确保代码仅在您用来记住Count的变量设置为某个值时调用（即您已经单击了外部数字）

接下来，在click函数中添加generateCanvas（）调用。现在，click函数设置用于表示中心值的变量，重绘画布并返回。你需要在你的鼠标按下功能中有更多的逻辑，以便弄清楚你点击中心的时间，但根据你已经拥有的代码，你可以弄明白，你的主要问题就是这个设置为运行一次，不是多次。这使得画布更像是图像而不是活动的绘图元素

不要忘记添加FlagElement.width = FlagElement.width来清除画布！（或只是在上面画一个背景）

如何显示/隐藏部分画布？

1 个答案: