Question

我一直在尝试向我的网站添加一些html和javascript，以便用户可以绘制一些形状。我在JS Fiddle上找到了一个非常好的示例。当我在JSFiddle上运行代码时，它可以完美运行，但是当我在浏览器中（我尝试使用Edge，Firefox和Chrome）运行它时，它却无法正常工作。当我自己运行它时，我将所有脚本和CSS都包含在一个html文件中，因为那是将其添加到Wix网站的唯一方法。脚本（本地javascript和外部cdn库）放在html的主体部分中。我发现的所有教程都使您可以使用CDN库。我很肯定我的问题与CDN库的连接有关，那么我该如何解决？

这是代码：

    var roof = null;
    var roofPoints = [];
    var lines = [];
    var lineCounter = 0;
    var drawingObject = {};
    drawingObject.type = "";
    drawingObject.background = "";
    drawingObject.border = "";

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    

    $("#poly").click(function () {
        if (drawingObject.type == "roof") {
            drawingObject.type = "";
            lines.forEach(function(value, index, ar){
                 canvas.remove(value);
            });
            //canvas.remove(lines[lineCounter - 1]);
            roof = makeRoof(roofPoints);
            canvas.add(roof);
            canvas.renderAll();
        } else {
            drawingObject.type = "roof"; // roof type
        }
    });


    // canvas Drawing
var canvas = new fabric.Canvas('canvas-tools');
    var x = 0;
    var y = 0;
    
    fabric.util.addListener(window,'dblclick', function(){ 
            drawingObject.type = "";
            lines.forEach(function(value, index, ar){
                 canvas.remove(value);
            });
            //canvas.remove(lines[lineCounter - 1]);
            roof = makeRoof(roofPoints);
            canvas.add(roof);
            canvas.renderAll();
      
        console.log("double click");
        //clear arrays
         roofPoints = [];
         lines = [];
         lineCounter = 0;
        
    });

    canvas.on('mouse:down', function (options) {
        if (drawingObject.type == "roof") {
            canvas.selection = false;
            setStartingPoint(options); // set x,y
            roofPoints.push(new Point(x, y));
            var points = [x, y, x, y];
            lines.push(new fabric.Line(points, {
                strokeWidth: 3,
                selectable: false,
                stroke: 'red'
            }).setOriginX(x).setOriginY(y));
            canvas.add(lines[lineCounter]);
            lineCounter++;
            canvas.on('mouse:up', function (options) {
                canvas.selection = true;
            });
        }
    });
    canvas.on('mouse:move', function (options) {
        if (lines[0] !== null && lines[0] !== undefined && drawingObject.type == "roof") {
            setStartingPoint(options);
            lines[lineCounter - 1].set({
                x2: x,
                y2: y
            });
            canvas.renderAll();
        }
    });

    function setStartingPoint(options) {
        var offset = $('#canvas-tools').offset();
        x = options.e.pageX - offset.left;
        y = options.e.pageY - offset.top;
    }

    function makeRoof(roofPoints) {

        var left = findLeftPaddingForRoof(roofPoints);
        var top = findTopPaddingForRoof(roofPoints);
        roofPoints.push(new Point(roofPoints[0].x,roofPoints[0].y))
        var roof = new fabric.Polyline(roofPoints, {
        fill: 'rgba(0,0,0,0)',
        stroke:'#58c'
        });
        roof.set({
            
            left: left,
            top: top,
           
        });


        return roof;
    }

    function findTopPaddingForRoof(roofPoints) {
        var result = 999999;
        for (var f = 0; f < lineCounter; f++) {
            if (roofPoints[f].y < result) {
                result = roofPoints[f].y;
            }
        }
        return Math.abs(result);
    }

    function findLeftPaddingForRoof(roofPoints) {
        var result = 999999;
        for (var i = 0; i < lineCounter; i++) {
            if (roofPoints[i].x < result) {
                result = roofPoints[i].x;
            }
        }
        return Math.abs(result);
    }

.canvas {
    border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<button id="poly"  title="Draw Polygon" ">Draw Polygon </button>


<label style="color:blue"><b>Press double click to close shape and stop</b></label>
<canvas id="canvas-tools" class="canvas" width="500" height="500"></canvas>

编辑

因此，在html文件中，我将所有内容都放在了body标记内。这些库也包含在javascript之前。双击关闭形状时，出现错误“无法获取未定义或空引用的属性'x'”。我很肯定，因为单击画布

时没有添加任何点

Answer 1

Wix不允许使用Cloudflare。以下链接有更多详细信息。

https://support.wix.com/en/article/request-cloudflare-support

Wix具有与HTML元素一起使用的有限API https://support.wix.com/en/article/corvid-working-with-the-html-element

如果您想在单独的页面上运行它（而不是在wix上）并且加载了脚本，请尝试将您的javascript代码包装在：

Group number : 1
Number : 130
Angle : 20_deg
Absolute extrema value : -41
------
Group number : 2
Number : 12
Angle : 10_deg
Absolute extrema value : 53
------
>> Extrema -31 got repeating idx 130 : next higher value of another index will be considered
Group number : 3
Number : 101
Angle : 20_deg
Absolute extrema value : -26
------
Group number : 4
Number : 5
Angle : 0_deg
Absolute extrema value : 61
------
A = [[-41   0   0   0]
     [  0  53   0   0]
     [  0   0 -26   0]
     [  0   0   0  61]]
A = [[-41  11  20   2]
     [  7  53  -9  40]
     [-31  23 -26  -6]
     [ -6 -25   3  61]]
det(A) = 7265430.000000008

html代码未访问外部Javascript库（cdnjs）

1 个答案: