【问题标题】:Object data randomly changed Fabricjs对象数据随机变化 Fabricjs
【发布时间】:2016-05-02 22:12:23
【问题描述】:

我有一段代码记录鼠标点击并在最后绘制一个多边形。 绘制多边形后,它会将坐标数组串起来以备将来处理。

我面临的问题是,记录和绘制的和字符串化的是完全不同的两组数据。

例如

(index):169 Mouse click at 543 179
(index):171 Object {x: 543, y: 179} contains value, match as per mouse click
(index):169 Mouse click at 310 592
(index):171 Object {x: 310, y: 592} contains value, match as per mouse click
(index):169 Mouse click at 735 480
(index):171 Object {x: 735, y: 480} contains value, match as per mouse click
(index):246 [{"x":20.5,"y":-206.5},{"x":-212.5,"y":206.5},{"x":212.5,"y":94.5}] is stringified value

JS

    var coords = [];
    var canvas = new fabric.Canvas('canvas');

    canvas.on('mouse:down', function (options) {
                getCoordinates(options);
        });



    $('.drawReady').click(function(){
           drawMyPolygon(coords, 1);
           stringifyTheData();
    });

function drawMyPolygon(retData, tmpId) {
            var polygon = new fabric.Polygon(retData, {
                fill: 'purple',
                selectable: true,
                lockMovementX: true,
                lockMovementY: true,
                id: tmpId
            });

            canvas.add(polygon);

        };
    function getCoordinates(options) {
      var pointer = canvas.getPointer(event.e);
      coords.push({x: pointer.x, y: pointer.y});
    }

    function stringifyTheData() {
      var retVal = JSON.stringify(coords);
    }

【问题讨论】:

    标签: javascript fabricjs


    【解决方案1】:

    看起来您使用的是fabricJS 1.6.0 之前的版本 在 1.5.0 中,fabricjs 正在修改点数组,而现在没有。

    cange 包括在每个点上减去多边形的顶部、左侧和一半宽度,使其原点居中。

    在传递到多边形之前更新或克隆点数组。

    【讨论】:

    • 宾果游戏做到了。奇怪的问题。更新到 1.6.1,问题立即消失。 nada 需要 3 小时的调试时间。
    • 是的,因为我们意识到这很奇怪并修复了它。
    • 呸,我喜欢。
    猜你喜欢
    • 1970-01-01
    • 2018-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-01
    • 2017-09-18
    • 1970-01-01
    • 2021-12-27
    相关资源
    最近更新 更多