Question

我使用Konvajs库创建了一个自定义标签制作工具。我为用户提供了一个标签库供选择作为起点或从头开始创建标签的选项。如果用户从标签库中选择我通过Json加载标签，我为用户提供了使用外部控件编辑任何文本元素的功能。用户可以设置以下属性：

fontFamily中
fontSize的
fontStyle
fontVariant
lineHeight是
填
对准

当用户点击画布上的文本对象时，外部控件设置了文本对象属性，允许用户修改上面列出的任何属性。

我遇到的问题是加载标签时文本格式是默认格式，直到用户点击要编辑的文本，然后应用所有预设属性。我需要在首次加载时显示预设属性。

这是我加载Json的函数：

function loadCanvasFromJson(json) {
        //Remove the disable class from action buttons...
        $('.dropdown-action-btn').addClass('disabled');            
        stage = Konva.Node.create(json, 'labelcontainer');
        stage.find('Image').forEach((imageNode) => {
            const src = imageNode.getAttr('src');
            const image = new Image();
            image.onload = () => {
                imageNode.image(image);
                imageNode.getLayer().batchDraw();
            }
            image.src = src;
        });         
        stage.find('Text').forEach((textNode) => {
            textNode.on("mouseover", function(e){
                 document.body.style.cursor = 'pointer';
            });
            textNode.on('mouseout', function() {
                document.body.style.cursor = 'default';
            });
            textNode.on('click', function(evt) {
                var text = evt.target;
                $('#add-label-text').addClass('hidden');
                $('#update-label-text').removeClass('hidden');
                $('#delete-label-text').removeClass('hidden');
                setTextClickValues(text);
            });
        });
    }

以下是单击文本对象时设置外部编辑器控件的功能：

function setTextClickValues(text) {
        var textObj = text.getAttrs();
        console.log(textObj);
        for (attr in textObj) {
            if (attr == 'align') {
                $('#text-align').val(text.getAttr(attr));
                if (text.getAttr(attr) == 'center')
                    $('.text-format-text-align-center').addClass('active');
                if (text.getAttr(attr) == 'left')
                    $('.text-format-text-align-left').addClass('active');
                if (text.getAttr(attr) == 'right')
                    $('.text-format-text-align-right').addClass('active');
            }
            if (attr == 'id') $('#text-group').val(text.getAttr(attr).replace('text',''));
            if (attr == 'text')  $('#label-text').val(text.getAttr(attr));
            if (attr == 'lineHeight') {
                $('#text-lineheight').val(text.getAttr(attr));
                $('#lineHeight').val(text.getAttr(attr));
            }
            if (attr == 'fontSize') {
                $('#text-size').val(text.getAttr(attr));
                $('#fontSize').val(text.getAttr(attr));
            }
            if (attr == 'fill') {
                $('#text-fill').val(text.getAttr(attr));
                $('.colorPickSelector.fill').css('background-color', text.getAttr(attr));
                $('.colorPickSelector.fill').css('color', text.getAttr(attr));
                if (text.getAttr(attr) == '#ffffff') {
                    $('.colorPickSelector.fill').css('border','1px solid rgb(221, 221, 221)');
                }
            }
            if (attr == 'fontFamily') {
                $('.text-format-dropdown-current').val(text.getAttr(attr));
                $('#text-font').val(text.getAttr(attr));
            }
            if (attr == 'fontVariant') {
                $('#text-fontVariant').val(text.getAttr(attr));
                if (text.getAttr(attr) == 'small-caps')
                    $('.text-format-text-variant').addClass('active');
            }
            if (attr == 'textDecoration') {
                $('#text-textDecoration').val(text.getAttr(attr));
                if (text.getAttr(attr) == 'underline')
                    $('.text-format-text-underline').addClass('active');
            }
            if (attr == 'fontStyle') {
                $('#text-fontStyle').val(text.getAttr(attr));
                if (text.getAttr(attr).indexOf('bold') > -1) {
                    $('.text-format-text-bold').addClass('active');
                }
                if (text.getAttr(attr).indexOf('italic') > -1) {
                    $('.text-format-text-italic').addClass('active');
                }
            }
        }
    }

Answer 1

我猜你的第一阶段加载，字体尚未加载。所以你需要等到字体加载然后重绘一个图层。为了获得最佳解决方案，您应该使用类似字体观察器的东西：

How to be notified once a web font has loaded

或者你可以简单地在超时时重绘图层（但这个解决方案并不完美）。

从序列化数据

1 个答案: