javascript - KonvaJS - 如何使用按钮触发器添加形状?

标签 javascript html konva

抱歉语法不好-

我对如何使用按钮触发器添加形状有疑问。 但不起作用

这是我的代码: HTML

<button id="btnCreateRectangle" class="btn-primary-blue">Button Text</button>

这是我的 js :


        function addRectangle(layer) {
            var scale = 1;

            var rectangle = new Konva.Rect({
                x: 12,
                y: 12,
                numPoints: 5,
                innerRadius: 30,
                outerRadius: 50,
                fill: "#89b717",
                opacity: 0.8,
                draggable: true,
                name: 'rect',
                width: 128,
                height: 50,
                scale: {
                    x: scale,
                    y: scale
                },
                shadowColor: "black",
                shadowBlur: 4,
                shadowOffset: {
                    x: 5,
                    y: 5
                },
                shadowOpacity: 0.6,
                // custom attribute
                startScale: scale
            });

            layer.add(rectangle);
        }
document
            .getElementById('btnCreateRectangle')
            .addEventListener('click', function () {
                addRectangle(layer)
            });

我对 javasrcipt 语言非常陌生, 任何建议或答案将不胜感激

谢谢

最佳答案

根据 KonvaJS 的文档,将矩形添加到图层后,您应该将该图层添加到 stage https://konvajs.org/docs/overview.html

stage.add(layer);

关于javascript - KonvaJS - 如何使用按钮触发器添加形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61263555/

相关文章:

javascript - fs.createRead/WriteStream() 与 fs.promises.open()

html - CSS 样式没有做它们应该做的事

html - ie7 和 google adsense 绝对定位

javascript - Jest 使用 react + konva 和/或 react-konva 遇到了意外的 token

javascript - 在 react-konva 中更改 Hover 上的光标

javascript - ReplaceChild() 应该如何工作?

javascript - 使用 jQuery 按类选择元素

javascript - jQuery animate 在 Canvas 上移动文本

javascript - 使用 JQuery 删除图像

reactjs - 如何设置自定义大小以在 react-konva 中导出图像?