Question

我在下面的代码段中添加了一行代码。

现在我想在组的行之间添加fabric.Text。

我尝试将文本和行添加为一组，但它会失败。

它给我一个像o.setCoords is not a function

这样的坐标错误

任何帮助都会有所帮助。

var canvas = new fabric.Canvas('c');
let gridSize = 15;

$("#addAsGroup").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    
    // add lines to group
    let group = new fabric.Group(separateLines);
    canvas.add(group);
});

$("#addAsSeparateObjects").click(() => {
    canvas.clear();
    let separateLines = [];
    for (let i = 0; i < canvas.getWidth() / gridSize; i++) {
        let horizontalLine = new fabric.Line(
            [i * gridSize, 0, i * gridSize, canvas.getWidth()], {
                stroke: '#000'
            });
        let verticalLine = new fabric.Line(
            [0, i * gridSize, canvas.getWidth(), i * gridSize], {
                stroke: '#000'
            });
        separateLines.push(horizontalLine);
        separateLines.push(verticalLine);
    }
    separateLines.forEach((line) => {
        canvas.add(line);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<button id="addAsGroup">AddAsGroup</button>
<button id="addAsSeparateObjects">AddAsSeparateObjects</button>

Answer 1

{ "web": { "issuer": "http://localhost:18080/auth/realms/Dev-Auth", "auth_uri": "http://localhost:18080/auth/realms/Dev-Auth/protocol/openid-connect/auth", "client_id": "flask_api", "client_secret": "0bff8456-9be2-4f82-884e-c7f9bea65bd1", "redirect_uris": [ "http://localhost:5001/*" ], "userinfo_uri": "http://localhost:18080/auth/realms/Dev-Auth/protocol/openid-connect/userinfo", "token_uri": "http://localhost:18080/auth/realms/Dev-Auth/protocol/openid-connect/token", "token_introspection_uri": "http://localhost:18080/auth/realms/Dev-Auth/protocol/openid-connect/token/introspect", "bearer_only": "true" } }根据您的功能创建一个包含文本的组或直接添加到画布。

<强> 样本

    import json
    import logging

    from flask import Flask, g, jsonify
    from flask_oidc import OpenIDConnect
    import requests

    app = Flask(__name__)

    app.config.update({
        'SECRET_KEY': 'TESTING-ANURAG',
        'TESTING': True,
        'DEBUG': True,
        'OIDC_CLIENT_SECRETS': 'client_secrets.json',
        'OIDC_OPENID_REALM': 'Dev-Auth',
        'OIDC_INTROSPECTION_AUTH_METHOD': 'bearer',
        'OIDC-SCOPES': ['openid']
    })


    oidc = OpenIDConnect(app)

@app.route('/api', methods=['GET'])
@oidc.accept_token(require_token=True, scopes_required=['openid'])
def hello_api():
    """OAuth 2.0 protected API endpoint accessible via AccessToken"""

    return json.dumps({'hello': 'Welcome %s' % g.oidc_token_info['sub']})


if __name__ == '__main__':

let group = new fabric.Group([...separateLines,text]);

在fabric js canvas中的组中添加文本和网格线

1 个答案: