Question

您好我已编写此代码以从文本文件中获取JSON数据并在画布上绘制形状我设法将数据从JSON全部绘制到画布上但现在我想将每个形状存储为变量所以如果用户点击它，我可以稍后在代码中引用它。

我已经编写了这段代码来试试这个，但是它只绘制了一个矩形，它甚至不会在里面绘制应该显示在其中的文本。

这是我的代码......

function ajax_GetCanvasData(){
    var req = new XMLHttpRequest();
    var context = document.getElementById("drawing_canvas").getContext('2d');

    req.open("GET", "List.php", true);
    req.setRequestHeader("Content-type", "application/json");
        req.onreadystatechange = function() {
        if(req.readyState == 4 && req.status == 200) {
            var data = JSON.parse(req.responseText);

            for(var item in data){
                if (data[item].type == "Node"){

                    var text = data[item].text;
                    var cx = data[item].cx;
                    var cy = data[item].cy;
                    var width = data[item].width;
                    var height = data[item].height;
                    var colour = data[item].colour;

                    node = new nodeObj(context,text,cx,cy,width,height,colour);
                }

            }
        }
    }
    req.send(null);
}

function nodeObj(context,text,cx,cy,width,height,colour) {

    this.text = text;
    this.cx = cx;
    this.cy = cy;
    this.width = width;
    this.height = height;
    this.colour = colour;

    var lineheight = 15

    context.fillStyle = colour;
    context.fillRect(cx,cy,width,height);
    context.strokeRect(cx,cy,width,height);

    context.fillStyle = '#000000';
    context.font = 'bold 12px Ariel, sans-serif';
    context.textAlign = 'center';
    context.textBaseline = 'ideographic';
    wrapText(context, text, cx + (width*0.5), cy+(height*0.5), width, lineHeight);
}

Answer 1

我会考虑使用像paper.js这样的库。它允许您以路径的形式保留对画布上绘制的对象的引用。这些你可以在以后以编程方式操作。

这似乎就是你想要做的。

这是我使用paperjs创建的截屏视频：http://tagtree.tv/canvas-with-paper-js，它是您想要做的完美入门。

使用ajax将JSON数据绘制到画布并将JSON项存储在变量中

1 个答案: