React native:Json.stringify无法序列化循环结构

时间:2018-03-09 12:12:02

标签: react-native

使用canvas属性时发生此问题。

我尝试使用canvas属性在native native中创建轮盘赌。我成功使用了canvas,但我不能使用ctx.drawImage方法。当我尝试使用它们时,我收到了类似

的错误
  

JSON.Stringify无法序列化循环结构

这是一个代码snipet

            componentDidMount(){
            wheelCanvas = this.updateCanvas();
    }

// This is in error while rendering : 

            ctx.drawImage(wheelCanvas, wheelCanvas.width / 2, wheelCanvas.height / 2);

            updateCanvas() {
            var outsideRadius = 120;
            var textRadius = 100;
            var insideRadius = 30;
            var canvas = this.refs.canvasRoulette;
            let ctx = canvas.getContext("2d");
            canvas.width = canvas.height = outsideRadius * 2 + 6;

            var x = outsideRadius + 3;
            var y = outsideRadius + 3;

            ctx.font = "bold 18px Helvetica, Arial";

            for (var i = 0; i < rouletteSize; i++) {
              var angle = i * arc;
              ctx.fillStyle = colors[i];
              ctx.beginPath();
              ctx.arc(x, y, outsideRadius, angle, angle + arc, false);
              ctx.arc(x, y, insideRadius, angle + arc, angle, true);
              ctx.strokeStyle = "#fff";
              ctx.lineWidth = 1;
              ctx.stroke();
              ctx.fill();
              ctx.save();
              ctx.shadowOffsetX = -1;
              ctx.shadowOffsetY = -1;
              ctx.shadowBlur = 0;
              ctx.shadowColor = "rgb(220,220,220)";
              ctx.fillStyle = "#fff";
              ctx.translate(
                x + Math.cos(angle + arc / 2) * textRadius,
                y + Math.sin(angle + arc / 2) * textRadius
              );

              ctx.rotate(angle + arc / 2 + Math.PI);
              var text = numbers[i];
              ctx.fillText(text, -ctx.measureText(text).width / 2, 5);
              ctx.restore();
            }
            return canvas;
            }

0 个答案:

没有答案