在使用konva时，我使用一个按钮将一个形状多次添加到我的舞台上，使用的东西类似于 document.getElementById('Rect').addEventListener( "click" , function () {
let layer = new Konva.Layer();
let item = new Konva.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
浏览 292提问于2020-06-14得票数 1
回答已采纳
我有几个层的Konva阶段，当我尝试转换为图像时，所有的阶段结果都可以，当我尝试转换层时-结果是可以的。但是，当我尝试转换形状时，比如文本、图像、Rekt toDataUrl()，它会给出带有形状大小的空白透明图像。这是
<div id="container"></div>
<div id="image">
<img id="imageData" src="https://github.com/rafaesc/vue-konva/raw/master/vue-konva.png" wi
浏览 0提问于2018-07-22得票数 0
回答已采纳
1回答
我在Group元素中有一个图像。与变压器元件，用户改变图像的宽度和旋转。在此之后，我如何获得图像宽度？getWidth()返回我在创建新图像时手动设置的值。getClientRect().width返回实际宽度，即它为用户显示的方式，所以看起来不错，但问题是在图像旋转时开始的。因为getClientRect().width返回的不是图像宽度(y)，而是图像(x)的边框宽度。
我用的是Konva v7.0
浏览 4提问于2020-09-08得票数 0
回答已采纳
如何序列化和反序列化自定义Konva形状？
Konva允许您使用sceneFunc创建自定义形状，但是当您将其存储到JSON并将其加载回时，您如何知道它是什么自定义形状？
浏览 2提问于2020-02-10得票数 2
回答已采纳
我用的是对Konva的反应。我将一个DOM元素拖到画布上，并创建一个Konva节点，就像文档中的狮子演示一样，但我从丢弃的元素创建了一个循环形状。
我希望在用户在悬停时将DOM元素放到画布上之前进行一些验证。它应该将画布上现有的圆圈形状与悬浮的DOM元素进行比较(它将替换它悬停在上面的圆圈)，这样如果有这样的形状，它就会替换现有的形状，或者如果没有这样的元素，就直接删除它。我认为碰撞检测也许是解决这个问题的好方法？
我是否需要在用户开始拖动时将DOM元素“转换”为Konva节点，以便进行验证?如果是的话，如何“传输”悬停事件？我应该从DOM元素的onDragStart创建Konva节点并以某种
浏览 0提问于2021-11-08得票数 0
回答已采纳
我正在和Konvajs一起做画布。我有一个圈层，我想要动画。有没有办法添加一个自定义的CSS到按钮，使它闪烁。下面是Konva config的代码部分。 <div class="container">
<v-stage :config="stageConfig" >
<v-layer>
<v-image :config="imageConfig1"/>
<v-circle :config
浏览 48提问于2020-10-30得票数 0
1回答
滑动浏览器焦点时的性能
、、、
我正在运行一个角的应用程序与一个Konva阶段与一些移动的形状和图像。我注意到，当浏览器脱离焦点，重新聚焦时，整个阶段就会冻结，而chrome dev tools中性能监视器的CPU在几秒钟内会达到100%。剖面仪显示，大约580毫秒是图像解码(绘画)和大约1000毫秒是系统。
然而，当浏览器保持不对焦时，性能监视器就不会显示出明显的变化，就像它保持焦点和形状平稳移动时一样。
有人知道是什么原因导致这种性能滞后的时候，再回到窗口吗？我的第一个想法是，它可能是画布或内部的东西，在Konva开始更新再次暂停，而浏览器是失去焦点.
浏览 8提问于2022-05-17得票数 0
我正在尝试使用Konva-React来使用fillpatternImage设置形状对象中的图像。
我尝试过几种不同的方法，但显然我需要使用图像对象，而不是用于fillPatternImage的Konva图像。
所以我在尝试这个..。
const GridView = (props) => {
const placeRectImages = props.places.map(({ ...otherProps }, index) => {
const corsProxy = 'https://cors-anywhere.herokuapp.com/&
浏览 24提问于2020-05-07得票数 1
回答已采纳
我在我的Vuejs/Nuxt应用程序中使用了Konvajs/Vue-Konva。我使用Konva在运行时动态创建Rect形状。我想知道是否有一种方法可以在每个形状中添加Text/Label。我想为每个Shape添加一个名称，以便分别标识每个Shape。 我已经在CodeSandBox中添加了我的代码示例。 有人可以告诉我如何将Text/Label添加到使用Vue-Konva创建的每个Rect/Shape中吗
浏览 135提问于2021-11-05得票数 1
回答已采纳
我有一张Konva的照片。如何设置半径或边界半径？
在docs中，Image类具有宽度和高度，但我想设置Radius (边框半径)。有一个圆形类，它可以有一个图像作为背景。但是，当我使用它时，您需要为每个图像指定尺寸，以使其缩放并裁剪正确的位置。
<v-image
:config="{
x: 50,
y: 50,
image: image,
shadowBlur: 5
}"
/>
在Image类中，应该有一个属性Radius。就像在圆圈课上一样。他们是我错过的另一种方法吗？
浏览 5提问于2019-10-01得票数 0
回答已采纳
我可以创建一个舞台并添加形状。但是，如果我使用Konva.Node.create命令，舞台将不再显示新添加的形状。
在下面的代码中，第一个文本“Hello World！”但是第二个文本(在Konva.Node.create之后)应该显示“Hello World 2！”不会出现在舞台上。
这段代码的一个有效工具是。
任何帮助都将不胜感激。谢谢
var stage = new Konva.Stage({
container : "container",
width : 400,
height : 300
});
var layer = new Konva.
浏览 47提问于2019-12-01得票数 0
我有一个有很多形状的舞台，当它被点击时，我想用键盘向上、向下、左边和右边移动一个形状。这个实现是为一个元素工作的，但是当我有多个元素时，所有的元素都会在按下键时被移动，我在Konva站点上找到了一个例子，bat它对一个元素起作用。当鼠标移动时，我尝试删除某个形状元素中的下一次单击时的事件，但它也不起作用。我怎么能做到呢？
我的代码
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'contai
浏览 9提问于2022-10-18得票数 0
1回答
所以我一直在尝试使用Konva来绘制一些图像，文本和形状，一切都很好，直到我尝试在混合中添加旋转。我知道Konva使用原点(默认情况下是左上角，可以通过偏移量移动)来旋转图像，但我需要位置始终是左上角。 因此，我尝试计算、旋转和重新定位对象，以模仿我想要的，但这总是导致图像位置与我的初始状态不同，这是一种不需要的行为。 所以我的问题是，Konva可以从中心旋转图像，同时在旋转后保持左上角的原点位置吗？ *使用代码编辑示例:绿色框/文本被旋转，但位置完全错误。我需要从左到右的位置。 const stage = new Konva.Stage({
container: 'cont
浏览 112提问于2020-03-20得票数 0
Konva形状同时具有"id“和"name”属性。大概这些都是为了满足不同的需求，但是在Konva中应该如何使用它们呢？要么由Konva本身使用，要么只是用户定义数据的持有者？
浏览 20提问于2021-11-08得票数 1
我有以下代码，其中的形状是动态创建的。单击形状箭头时，会生成箭头，可以使用箭头头上的控制器来调整箭头的大小。
现在，当我拖动形状时，我需要移动箭头的起点。但是因为箭头在不同的层，所以我无法引用它。如何做到这一点？
示例代码：
var stage = new Konva.Stage({
container: 'canvas', // id of container <div>
width: 500,
height:300
});
var layer = new Konva.Layer();
jQuery(
浏览 0提问于2016-07-16得票数 1
回答已采纳
1回答
目前，我只能使用jpeg和png导出，如下所示： stageRef.current?.getStage().toDataURL({ mimeType: 'image/jpeg', quality: 1 })
stageRef.current?.getStage().toDataURL({ mimeType: 'image/png', quality: 1 }) 我想像Figma一样将Canvas导出到svg和pdf。 我发现了导致MIME_types的Data URIs。在那里，他们写了application/pdf & image/svg+xml应该
浏览 59提问于2021-01-05得票数 0
回答已采纳
我在我的项目中使用Konva JS。我正在添加一个形状的按钮点击，这是可拖动的。单击该形状，我需要获得该形状的X和Y位置。getX和getY函数返回原始的X和Y。如何在拖动后更新X和Y。 下面是示例代码。 var stage = new Konva.Stage({
container: 'canvas', // id of container <div>
width: 500,
height:300
});
jQuery("#add-shape").click(functio
浏览 212提问于2016-07-16得票数 8
回答已采纳
1回答
警告:在运行代码片段！之前，请将音量调低
我想要能够点击舞台添加一个‘模块’的形状。但我发现，单击“模块”形状本身就会产生另一个形状，这意味着stage.click侦听器在不应该触发的情况下被触发。
当我单击一个形状时，如何才能有一个不正确触发的stage.click侦听器呢？
var width = window.innerWidth;
var height = window.innerHeight;
var rectButtonClicked = false;
var stage = new Konva.Stage({
container: 'container'
浏览 3提问于2017-12-22得票数 1
回答已采纳
1回答
我创建了一个类，根据Konva网站上的，使用事件侦听器将图像加载到画布中。
我有一个完全由透明背景上的白色像素组成的PNG。我想把白色像素染成纯色(例如，红色、紫色或青色)。我已经看过了，但是我很难理解这些特定的部分是如何结合在一起的。
我如何使用react konva.Image(例如使用<Image filters={[...]} image={...} ref={node => {this.imageNode = node;} />)来完成这个任务？
下面是我前面提到的TypeScript类：
// import Konva from 'konva';
浏览 2提问于2020-03-25得票数 0
回答已采纳
这是一个自我回答的问题，部分是为了我未来的自我，当我忘记了这个怪癖时，希望它能让其他人省去为自己找到解决方案的旁白。
所以我在编码客户的形状。我想听形状上的鼠标和触摸事件，所以我使用带有.konva后缀的事件，例如mousedown.konva。这些事件是由Konva自己设置的，所以我所需要做的就是添加我自己的侦听器。这适用于标准形状，如Rect和圆圈。
但是，我注意到了一个'bug‘，在设置myShape.draggable(false)之后，mousedown.konva侦听器就不再被触发了。
看上去像这样
const stage = new Konva.Stage({
浏览 8提问于2022-08-08得票数 0
在HMTL中，如果我有一个konva Rect元素。我想把它添加到两个阶段的两个konva层上，但只有第二个阶段有Rect？ 我的代码如下： var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width/2,
height: height
});
var stage2 =
浏览 20提问于2019-10-14得票数 1
1回答
我的问题是如何拖放一个形状，但克隆可拖放的形状，并将克隆拖到可放放的形状。
我是新来Konva的。在浏览文档和示例时，我可以找到如何拖放形状。
我找到了克隆形状的参考，但我不确定如何做到这一点。
如果有人能给我指路，我将不胜感激。
谢谢
浏览 2提问于2015-04-04得票数 3
我正在使用konvajs，需要帮助！假设我需要一个在复杂形状中可拖动的图像。因此，我想知道，是否可以使用掩蔽与Konva.Group，而不是clipFunc或一种方式，将掩蔽图像转换为画布剪辑路径和使用与clipFunc！
像这样：
浏览 0提问于2017-07-14得票数 0
我使用React Konva，想知道如果一个Konva线多边形完全在另一个线多边形内，最好的方法是什么？
浏览 29提问于2021-09-13得票数 1
因此，我浏览了vue-konva页面上列出的示例代码。虽然它是创建形状的示例，但我对它的理解足以让我从显示一个简单的图像开始。下面是基本代码。我的问题在于如何将实际的图像文件附加到" image“属性。或者我是不是错过了什么。
<template>
<div id="app">
<h1>Display Image via Konva</h1>
<div>
<v-stage ref="stage" :config="configKonva"&
浏览 16提问于2018-02-03得票数 2
回答已采纳
我想使用Konva js来完成以下任务：
从db循环数据，然后在画布上绘制组，组包含circle+text。
2-当形状增加时，放大，使它们保持在中间。
我遇到的挑战：
当形状超过层宽时，我开始放大，但我不能将它们保持在中间。
如何计算层x轴取决于形状，以保持帆布中心？
我如何计算变焦，以保持位置只是为了一个新的形状，而不是放大太多？
提前谢谢你
请查找：
浏览 2提问于2020-06-30得票数 1
回答已采纳
我有下面的代码。
var stage = new Konva.Stage({
container: 'canvas',
width: 500,
height: 300
});
var eventWrapperLayer = new Konva.Layer({});
var createTriggerBlock = function(elemType, elemText, elemId) {
eventElementCounter = 0;
var eventNode = new Konva.Group({
x: 100,
y: 10
浏览 3提问于2016-08-17得票数 2
我在我的项目中使用konva js。我怀疑如何更新已经存在的形状、宽度和高度的值。
例如：
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
fill: "white",
});
var layer = new Konva.Layer();
stage.add(layer);
var bg = new Konva.Rect({
x: 0,
y: 0,
width:
浏览 1提问于2021-09-30得票数 0
回答已采纳
我想在Konva中创建一个拖拽游戏。与这里的非常相似。
然而，我想有一个创建游戏的界面，其中作者绘制了一个背景图像。然后，它会根据这些路径自动生成游戏。
我有这段代码来裁剪我的背景图像。
return _.map(this.props.areas, (area) => {
return (
<Group
draggable={true}
clipFunc={(ctx) => {
canvasDrawFuncMap[ar
浏览 4提问于2018-12-11得票数 1
1回答
我一直在我的一个项目中使用这个(https://github.com/oasis10702/konva-simple-example)代码，一切工作正常。然而，将react和react-konva更新到最新版本会导致一些意外的行为。使用变压器调整矩形大小时，它会缩放边框描边，请参见图像。scaleX和scaleY似乎也没有重置，这使得我每次移动矩形时，它都会执行缩放。 ? 我对React和Konva都是新手，我想知道在新版本中是否有一些逻辑发生了变化，我应该考虑减轻这种情况。 尝试在下面的沙箱中调整矩形的大小。https://codesandbox.io/embed/vyv106x2
浏览 54提问于2019-05-02得票数 0
回答已采纳
我试图能够拖动一个形状，即使在它上面有另一个形状。
，如果是的话，你知道怎么做吗?
是否有Konva参数可以解决这种情况?
谢谢
const stage = new Konva.Stage({
container: 'container',
width: 300,
height: 300
});
const layer = new Konva.Layer();
stage.add(layer);
const shape = new Konva.Rect({
x: stage.width() / 2,
y: stage.height() / 2,
浏览 3提问于2022-02-06得票数 2
我是一个新手konvas libray用户，我试着做了一个简单的游戏，我需要检测的时候从形状和显示警告"louser"，问题是形状不规则，因为检测事件的函数工作良好的矩形形状，但在不规则形状不尊重边框形式，我希望可以帮助我一个检测时，框拖出不规则形状和尊重边框，谢谢，代码如下 Konva Drag and Drop Multiple Shapes Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@7.2.2
浏览 25提问于2021-02-12得票数 0
1回答
帆布形状缩放
、、、、
我正在使用带有konva库的画布，并试图缩放画布元素。我可以轻松地缩小它与CSS，但问题是，我在那里画的形状是可点击的。当画布缩小元素时，元素也是一样的，但是它们的面具或可点击的区域却没有。这意味着，如果我单击缩小画布上的形状，就不会发生任何事情，因为单击掩码位于不同的位置，并且与原来的形状相同。
问题是，我怎样才能缩放形状，点击面具边与帆布底座？
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 500
});
for (var i = 0; i < shape
浏览 2提问于2018-01-29得票数 3
回答已采纳
1回答
我想知道如何把盒子放在前台，图像放在背景中。我尝试moveToTop()，setZIndex()在框中，但当我拖动它时，图像转到前台。
one(){
var stage = new Konva.Stage({
container: 'container',
width: 400, height: 250
});
var layer = new Konva.Layer();
var imageObj = new Image();
imageObj.onload = function() {
va
浏览 1提问于2018-11-04得票数 1
回答已采纳
1回答
我在我的项目中使用了。我需要一个像这样的箭头：
箭头将位于两个形状之间。形状是可拖动的。箭头线的长度应随用户拖动形状而增加或减少。作为一种变通方法，我在这个中使用了两个Konva.Arrow实例。但我不想使用两个实例，因为当用户拖动形状时，很难管理它们的位置。我不知道如何才能做到这一点。
浏览 19提问于2015-12-17得票数 1
我正在使用Konvajs库。我试图在主要的Stage元素周围放置一个边框，但似乎无法使其工作。CSS仅适用于<div>，而Konva.Stage元素似乎没有特定的属性。
在Stage层的4个边框上添加线条形状是唯一的方法吗？
我的Konva容器
<div class="TSPKonvaStage" id="KonvaContainer"></div>
我的Konva宣言如下
var stage = new Konva.Stage({
container: 'KonvaContainer',
浏览 20提问于2018-03-21得票数 2
1回答
Javascript两个对象相交
、、、、
我一直在使用Konva进行绘图，当箭头的尖端与其他组或形状相交时，当用户松开鼠标时，我希望箭头“快照”到其他组或形状。如果箭头没有插入一个箭头，那么它应该自动删除它自己。
然后，当组或形状被移动时，我希望箭头的尖端与它一起移动。
我发现了一个类似的例子，但我不知道如何将它们结合起来得到我想要的东西。
我将在下面张贴我的当前代码。
示例链接
码
var width = height = 170;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
浏览 0提问于2018-09-16得票数 3
回答已采纳
在Stage上设置scale也会更改Stage的层子树子项中的比例(通过继承？)。设置Stage scale时，Konva会触发事件吗？因为我想覆盖属于stage的图层中包含的形状中的缩放设置(以免在形状中缩放过小或过大)。
浏览 10提问于2019-08-21得票数 0
1回答
我正在尝试用Konva构建甘特控件(使用Konva是否有意义)？我试图在下面勾勒出这个控件：
我想把Konvas的舞台分解成以下几个部分：
包含4个层的一个阶段:活动名称、时间线、活动视图和滚动条视图。
滚动条层将包含一个模仿标准滚动条控件的“自定义控件”。
在这个阶段，我有几个问题要问：
从事件处理的角度来看，同步不同层的最佳方法是什么？例如，如果用户单击滚动条的向下箭头形状，我将需要“滚动”所有层一个单位向下。
Konva坐标系是如何工作的？形状的绘制是否相对于包含的层完成？
一层和一组有什么区别？使用一个组而不是层更有意义吗？
我意识到我的问
浏览 1提问于2018-03-07得票数 2
回答已采纳
我的javascript画布应用程序有一些问题，当鼠标鼠标光标位于画布形状上时，我试图更改画布区域外html元素的背景色。我在使用konva图书馆。
我在代码中试图做的是，当鼠标光标在画布元素形状构建上时，针对html侧文本类并对其背景进行着色。移动到不同的建筑物，它突出了不同的文字元素，以显示哪些区域在该建筑物。当游标离开画布建筑区域而不在任何其他建筑物上时，它就不会高亮显示任何文本元素。就像一张互动地图。
所以我要问的是，当我在画布形状上悬停时，如何在html端突出显示文本元素，然后在使用konva库时停止突出显示离开画布形状？
var stage = new Konva.St
浏览 1提问于2017-11-14得票数 0
回答已采纳
2回答
只需要创建具有图像背景的线。我在官方文档(https://konvajs.org/api/Konva.Line.html)中找到了这个机会。开始我只需要创建有张力，颜色填充和宽度的线条，但是宽度属性不起作用(或者我不知道怎么做)。我的代码和输出： let line2 = new Konva.Line({
x: 100,
y: 50,
points: [75, 75, 100, 200, 300, 140],
fill: "red",
tension: 0.5,
width: 50,
strokeWidth: 1,
stroke: 'gr
浏览 41提问于2019-10-01得票数 0
回答已采纳
我需要点击舞台，并改变它的颜色使用按钮在它里面。我已经设法在画布上放了一个按钮，但这次我需要这个按钮出现在我的舞台上。
浏览 0提问于2019-04-03得票数 0
回答已采纳
我的问题是:我有两个形状在舞台上和按钮点击，我需要放大到特定的形状和它的位置。你知道怎么做吗？
我已经检查了教程的缩放到指针的位置和舞台的中心。
浏览 15提问于2021-08-16得票数 1
我正在尝试做一个应用程序，您可以在其中绘制自定义矩形形状的对象，并能够拖动您的舞台在同一时间。有可能用Konva.js吗？
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
document.addEventListener('mousedown', (e) => {
switch (e.button) {
case 0:
stage.dragga
浏览 0提问于2019-01-07得票数 1
回答已采纳
我正在使用Konva.js做一些画布动画。我有圆形形状，与图像填充，并希望应用颜色覆盖/过滤器的形状(RGBA)。
我是这样创建Shape对象的：
var konvaObject = new Konva.Circle({
x: 100,
y: 100,
radius: 300,
stroke: this.color,
strokeWidth: 6,
fillPatternRepeat: 'no-repeat',
});
// load the image into the shape:
var imageObj = new Im
浏览 3提问于2016-06-30得票数 2
回答已采纳
我正在寻找一种在react-konva中基于鼠标事件绘制形状的方法，但只能找到在屏幕上静态绘制形状的方法
浏览 4提问于2021-06-15得票数 1
1回答
我试图在Konva中定义一个自定义形状，我尝试了下面的代码，它绘制一个矩形，我想记录它的点击，但单击检测不起作用。为什么？
我不知道我错在哪里
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Custom Shape Demo&
浏览 8提问于2017-08-11得票数 1
回答已采纳
我正在使用点击Konva舞台。用户不会直接点击Konva的画布，相反，用户会单击其他的东西，并且根据一些计算将单击转换为Konva画布。
我有一个用Babylonjs编写的3D平台，它使用Konva的画布作为动态纹理。然后将纹理应用到网格上。当点击网格时，它会告诉我纹理的哪个区域(x，y)被点击了。现在，我将不得不以编程方式触发对纹理(Konva的画布)的单击，这样Konva的形状就可以被选中，并且他们可以在纹理周围拖动它，这将在网格(3d)上被实时更新。
问题是，我的自定义鼠标事件无法被
stage.on('click'.
请检查下面的例子。
使用制造的工作解决方案。
浏览 6提问于2022-02-11得票数 0
回答已采纳
2回答
试图使用Rough.js渲染部分的konva阶段，但没有成功。Rough使用对画布的引用来绘制，但是konva层上的getCanvas()和toCanvas()似乎都做不到这一点。想法？
// Combined code
const cstage = new Konva.Stage({
container: 'roughAndKonva',
width: 200,
height: 200
});
const clayer = new Konva.Layer();
var konvaCanvas = clayer.getCanvas()
const crc =
浏览 0提问于2019-05-20得票数 1
回答已采纳
2回答
我很难修改下面的代码，所以当缩放卷轴时，图像被放大--总是在图像的中心，而不是取决于光标的位置(所以图像不会移动，只是放大/缩小--不管光标在哪里，整个画布总是在中间放大)。
所以问题是-如何缩放图像始终在中心？谢谢!
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konv
浏览 27提问于2020-07-16得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
