fabricjs loadFromJSON подкласс Line - PullRequest
Новая
       17

fabricjs loadFromJSON подкласс Line

0 голосов
/ 29 октября 2019

Я использую этот пост ответ и прекрасно работает для меня. Проблема возникает, когда я создаю JSON с канвой и пытаюсь установить его на другом канве с помощью метода loadFromJSON. Я думаю, проблема в том, что для этого нового подкласса нет метода fromObject, и я попытался напечатать его, но я не могу написать ничего, что работает.

Так я определил подкласс (это почти копиявставить из ссылки) 

fabric.LineaBote = fabric.util.createClass(fabric.Line, {
type: 'linea_bote',

initialize: function (element, options) {
    options || (options = {});
    this.callSuper('initialize', element, options);

    // Set default options
    this.set({
        hasBorders: false,
        hasControls: false,
    });
},

_render: function (ctx) {
    this.callSuper('_render', ctx);
    ctx.save();
    const xDiff = this.x2 - this.x1;
    const yDiff = this.y2 - this.y1;
    const angle = Math.atan2(yDiff, xDiff);
    ctx.translate(xDiff / 2, yDiff / 2);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.closePath();
    ctx.fillStyle = this.stroke;
    ctx.fill();
    ctx.restore();
    var p = this.calcLinePoints();
    var point = this.pointOnLine(this.point(p.x2, p.y2), this.point(p.x1, p.y1), 15)
    this.wavy(this.point(p.x1, p.y1), point, this.point(p.x2, p.y2), ctx);
    ctx.stroke();
},

point: function (x, y) {
    return {
        x: x,
        y: y
    };
},

wavy: function (from, to, endPoint, ctx) {
    var cx = 0,
        cy = 0,
        fx = from.x,
        fy = from.y,
        tx = to.x,
        ty = to.y,
        i = 0,
        step = 2,
        waveOffsetLength = 0,

        ang = Math.atan2(ty - fy, tx - fx),
        distance = Math.sqrt((fx - tx) * (fx - tx) + (fy - ty) * (fy - ty)),
        amplitude = -3,
        f = Math.PI * distance / 10;

    for (i; i <= distance; i += step) {
        waveOffsetLength = Math.sin((i / distance) * f) * amplitude;
        cx = from.x + Math.cos(ang) * i + Math.cos(ang - Math.PI / 2) * waveOffsetLength;
        cy = from.y + Math.sin(ang) * i + Math.sin(ang - Math.PI / 2) * waveOffsetLength;
        i > 0 ? ctx.lineTo(cx, cy) : ctx.moveTo(cx, cy);
    }
    ctx.lineTo(to.x, to.y);
    ctx.lineTo(endPoint.x, endPoint.y);
},

pointOnLine: function (point1, point2, dist) {
    var len = Math.sqrt(((point2.x - point1.x) * (point2.x - point1.x)) + ((point2.y - point1.y) * (point2.y - point1.y)));
    var t = (dist) / len;
    var x3 = ((1 - t) * point1.x) + (t * point2.x),
        y3 = ((1 - t) * point1.y) + (t * point2.y);
    return new fabric.Point(x3, y3);
},

toObject: function () {
    return fabric.util.object.extend(this.callSuper('toObject'), {
        customProps: this.customProps,
    });
},});

А вот как я пытался написать функцию fromObject (): 

fabric.LineaBote.fromObject = function (points, callback) {
callback && callback(new fabric.LineaBote(points, object));};

Ошибка из консоли Google Chorme: Uncaught TypeError: Невозможно прочитать свойство'fromObject' из неопределенного

1 Ответ

0 голосов
/ 30 октября 2019

Насколько я понимаю, проблема заключалась в том, что fromObject не был определен. Автор обновил оригинальный пост ответ и написал функцию. Благодаря ему.

...