KonvaJS:图层还是组？
KonvaJS是一个强大的HTML5 2D绘图库，用于在Web上创建交互式图形和动画。它提供了一个基于Canvas的绘图API，使开发人员能够轻松地创建和操作图形元素。
在KonvaJS中，图层和组都是用于组织和管理图形元素的概念。
- 图层（Layer）：图层是KonvaJS中的一个重要概念，它类似于画布上的透明薄片，可以在上面绘制和操作图形元素。每个图层都有自己的绘图上下文，可以设置不同的属性和样式。图层可以用于控制图形元素的显示顺序，通过调整图层的顺序可以实现元素的遮挡和显示。在KonvaJS中，可以创建多个图层，并将图形元素添加到不同的图层中。
- 组（Group）：组是KonvaJS中的另一个重要概念，它允许将多个图形元素组合在一起，形成一个单独的可管理的单元。通过将图形元素添加到组中，可以对组进行整体的操作和变换，例如移动、旋转、缩放等。组可以嵌套在其他组中，形成复杂的图形结构。在KonvaJS中，可以创建多个组，并将图形元素添加到不同的组中。
总结：
- 图层用于控制图形元素的显示顺序和遮挡关系。
- 组用于将多个图形元素组合在一起，形成可管理的单元。
KonvaJS官方文档：https://konvajs.org/
相关·内容
我有一个关于KonvaJS的问题。
我目前正在使用ng2-konva开发Angular CLI，它与所有KonvaJS组件相对应。现在我想创建一个舞台，它可以无限地拖动。这可以通过在配置中设置drag: true来实现。但是现在我想在舞台上添加一个网格背景，可以是点线，也可以是线条。
我试着自己排除故障，但找不到一种使用Angular TypeScript语法来编写代码的方法。
我的主舞台配置：
public configBackground: Observable<any> = of ({
width: window.innerWidth,
height: win
浏览 48提问于2021-06-22得票数 0
1回答
konvajs图像的圆形裁剪
、、、、
我想在我的画布上显示圆形裁剪的图像，我用的是konvajs。在konva中有什么方法可以做到吗?或者用JS/CSS解决这个问题呢？
这是我用来加载图像的代码。
var src = 'https://konvajs.github.io/assets/yoda.jpg';
Konva.Image.fromURL(src, function(yoda) {
console.log(yoda);
yoda.setAttrs({
x: 10,
y: 10,
width: 180
浏览 5提问于2021-03-15得票数 4
回答已采纳
1回答
我是PaperJS的忠实粉丝，但是，库没有看到太多的活动，所以我们关注其他工具，比如KonvaJS、Fabric和Pixi。我们想在这里复制这个例子：
在KonvaJS中，我们不确定哪个类最合适？我们应该使用这条线，它被描述为带有张力的点的集合，是我们在纸中使用的路径工具，还是形状类？KonvaJS是否提供相同类型的访问贝塞尔曲线工具和形状边框，蓝线，在上述文件示例中找到的？
浏览 29提问于2022-05-01得票数 0
回答已采纳
在konvajs中是否有一种简单的方法来禁用层及其子层的交互/事件(拖放/后移动/单击)？
我有一个包含多个层的设置，一次只能使用一个层进行交互，因为来自不同层的元素是重叠的，这使得用户很难单击/拖动正确的元素。
最糟糕的情况是注销/注册每个处理程序或拦截所有处理程序，只基于全局状态执行主体。由于konvajs层是单独的画布元素，我希望有更好的方法来做到这一点(无论是在konvajs中直接使用还是手动在画布上)
浏览 5提问于2022-11-24得票数 0
回答已采纳
1回答
我想在konvajs的形状上做自由绘画。喜欢一个exp；你能给我一些关于形状的建议，比如zindex或smt。
浏览 3提问于2018-10-04得票数 1
如何使用Konva库设置图层的背景色？
我试过：
DashLayerA1.setAttr(“填充”，‘黑色’)；
但它似乎并没有起什么作用。
只是通过我发现是创建了一个形状，并为它指定一个颜色，但不方便，我想做什么。
谢谢。
浏览 1提问于2019-02-16得票数 1
回答已采纳
我正在使用Konva.js框架，并尝试将一个图像蒙版应用到另一个蒙版上。代码完全从该复制而来。在这个中，有一些小的修改来添加背景(Rect)。
问题是背景没有正确绘制。要在代码中查看它的实际情况，有一行代码用于注释/取消注释(查看实际问题)。有没有人有办法做到这一点？
最好的
let stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
let layer = new Konva.Layer()
浏览 4提问于2017-10-04得票数 4
1回答
将图层添加到另一个图层
、、、、
我有下面的代码，我试图将一些Kineticjs层添加到另一个层，但当我什么都不做时，根本没有显示。我有其他形状添加到画布上，显示良好，如果我添加所有层分开，然后他们出现。这是一个bug，还是我做错了什么？
this.canvas = new Kinetic.Stage({ "container": jQuery( "#testElement" ).get(0),
"width": ShooterGame.WIDTH, "height": ShooterGame.HEIGHT });
this.container = ne
浏览 1提问于2012-08-16得票数 0
回答已采纳
假设我有4层，A，B，C，D，layer.depth()为1，4，2，3。
当我使用groupLayer.add( layer )将这些层添加到父层时，添加的这些层的索引(ala，depth，)似乎忽略了'depth()‘属性，并且结果仅与我添加它们时的顺序一致。
我不确定这是一个实现错误还是我有错误的用法语义。
浏览 4提问于2012-04-20得票数 1
我正试着在暂停的视频上画一幅画。为此，我想使用Konvajs。 我想我可以尝试将视频作为图层嵌入到Konvajs中，但我也可以将Konvajs元素覆盖在视频的顶部，并为其添加透明度。 第二种方法在我现有应用程序的上下文中看起来更简单。我应该期待两者之间的性能差异吗？ 谢谢!
浏览 50提问于2021-08-02得票数 1
回答已采纳
2回答
在Konvajs聊天流上，最近有人要求提供一个从调色板拖放到由Konvajs库前面的HTML5画布上的示例。没有现成的例子，我很好奇如何实现它。
我用密码回答了这个问题，但决定在这里张贴(我自己的)将来参考。见下面的答案。
浏览 7提问于2017-11-22得票数 1
回答已采纳
1回答
我正在实现一个与图形相关的web应用程序，我希望检测图像分辨率，并验证用户是否正在上传新闻部太低的图像
我怎样才能做到这一点？
这个有图书馆吗？
在HTML 5画布中，还是在Konvajs (HTML画布库)中有解决方案？
是否有任何图像加载程序支持确定上传的图像分辨率？
浏览 0提问于2018-05-04得票数 0
回答已采纳
使用Konvajs，我需要拖动另一个对象下面的对象，而不是将底部的对象放在顶部，顶部的对象是不可拖动的。 会很感谢你的帮助的，谢谢。
浏览 43提问于2020-12-17得票数 0
我想使用给定百分比的KonvaJS的乌贼过滤器。就像上20%的乌贼
有没有可能在KonvaJS上这样设置Sepia的值？
浏览 0提问于2019-08-12得票数 0
1回答
无法禁用Konva的鼠标关闭事件
、、、、
我试图用javascript禁用mousedown事件。我试图修改github的一个项目，所以我不知道确切的事件函数名称。我可以通过火狐，铬工具禁用它，但我不能禁用它编程。我试过了
$('.konvajs-content').off('mousedown');
$(".konvajs-content").onmousedown = null;
$(".konvajs-content").on("mousedown", function(e){
e.preventDefault();
e.stopImme
浏览 12提问于2022-05-19得票数 0
我会在每次双击stage时添加一个konvajs图像对象，如下所示。我怎样才能给用这种方式创建的konvajs图像对象添加一个事件监听器，在konvajs中有没有标准的javascript addEventListener的等价物？ stage.on('dblclick', function(e) {
//getString tell what shape to draw.
if (getString == "real-input") {
var imageObj = new Image();
imageObj.onload =
浏览 17提问于2019-03-18得票数 1
回答已采纳
在Gimp中，我创建了一个由大约200个层组成的.xcf文件。有些是可见的，有些是不可见的。现在我想创建一个由所有图层组成的图片，所以我必须让所有图层都可见。稍后，我将不得不返回到一些层可见而另一些层不可见的状态。我如何在不点击数百个点击框的情况下实现这一点呢？
浏览 1提问于2015-10-22得票数 11
回答已采纳
社区。我需要使用KonvaJS用鼠标绘制一个箭头。我不使用React。这是我第一次使用KonvaJS。我已经搜索了解决这个问题的信息，但我什么也没找到。我也阅读了这个库的文档，但我只发现如何绘制一个基本的箭头。我将感谢你的帮助。非常感谢!
浏览 184提问于2020-10-27得票数 1
3回答
我有一个有3层的按钮:轮廓的圆角矩形，箭头图标和文本，如下所示：
如何将箭头和文本居中对齐到矩形，而不将它们合并到一个图层中？我试着将它们链接在一起，然后对齐到选区，但这样它们就会堆叠在一起。
浏览 5提问于2015-03-27得票数 1
1回答
我正在使用示例创建我的swipe，并且它起作用了。但是，我想使用一组层来选择要显示的层，如下面的代码所示。
var swipe_control = new ol.control.Swipe();
// Group of layers - menu
var overlays = new ol.layer.Group({
title: 'Maps',
fold: 'open',
layers: [
new ol.layer.Group({
title: 'Group 1'
浏览 3提问于2021-11-29得票数 0
我正在试着用鼠标做一个绘图板。 使用KonvaJS，我可以画一条线或一个箭头。如何更改线条和箭头末端的样式？ 我使用Konva。Arrow和Konva.Line这就是我需要的 示例： ?
浏览 204提问于2021-08-17得票数 0
1回答
KonvaJS图形编辑器移动节点
、、、、
我正在开发一个具有节点和分支的图形编辑器。和潘/佐姆。我从(1) Pan/Zoom (完成)、(2)添加节点(完成)、(3)选择节点(完成)、(4)移动节点(禁用潘)开始。我被困在这里了。我把舞台拉着给潘。当我想移动(拖动)节点时，我将舞台拖放为false。但我看不出怎么拖动节点。图形编辑器的使用是(+)节点来创建节点。谢谢你的帮助。
这里是一个jsbin
function evtFct_OnMouseDragStart(event) {
var realMousePos = getRelativePointerPosition(group);
console.lo
浏览 0提问于2019-07-18得票数 0
回答已采纳
我有一个KonvaJS应用程序，我正在使用scale选项处理一个问题。
您可以在这里看到问题：
我使用KonvaJS Line类来绘制，它工作得很好。但是当我改变舞台规模的时候，问题就出现了。就像光标在一个不同的位置。
我尝试了不同的解决方案，但没有运气。
对于如何解决这个问题，有什么想法吗？
提前谢谢。
浏览 0提问于2018-10-02得票数 1
回答已采纳
有没有办法仅为内部图层上的名称检索图层组的名称？我之所以这样问，是因为我正在尝试裁剪文件夹中包含特定图层的所有内容。有什么可以帮我的吗？
浏览 7提问于2013-08-26得票数 4
我有两个精灵组：visible_ui_elements和ui_elements。仅渲染visible_ui_elements中的精灵。我正在使用set_visible方法来更改sprites的可见性。 class UIMain:
ui_elements = pg.sprite.Group()
visible_ui_elements = pg.sprite.Group()
class UIComponent(pg.sprite.Sprite):
def __init__(self):
pg.sprite.Sprite.__init__(self)
浏览 12提问于2020-08-25得票数 0
回答已采纳
1回答
我正在尝试在上查找与KonvaJS过滤器等效的CSS值
例如，我如何在KonvaJS中应用"1977“过滤器。我尝试了很多方法，但每次都得到不同的结果。另外，是否有可能给出深褐色或灰度的值？
我使用这样的过滤器(具有不同的值)：
backgroundImage.filters([
Konva.Filters.Contrast,
Konva.Filters.Brighten,
Konva.Filters.HSV
]);
backgroundImage.contrast(10);
backgroundImage.brightness(0.10);
back
浏览 39提问于2019-07-24得票数 1
2回答
我正在寻找一种方法，使集群的边界永久可见，而不仅仅是鼠标悬停。到目前为止，我还没有找到解决方案。我正在使用leaflet的markercluster插件。我必须插入带有关于本地带宽的信息的数据点。我想要那些得到集群，然后区域得到一个特定的颜色轮廓。感谢你们的支持:-)
问候马特
浏览 9提问于2017-02-28得票数 3
回答已采纳
Leaflet文档说它的GeoJSON对象继承自它的FeatureGroup对象，该对象继承自它的LayerGroup对象，后者继承自它的Layer对象。它还说明GeoJSON对象可以接受GeoJSON特性或FeatureCollection作为输入。如果我用GeoJSON FeatureCollection创建一个Leaflet GeoJSON对象，FeatureCollection中的每个GeoJSON特征是Leaflet LayerGroup还是LayerGroup中的一个层？那么，如果我只有一个GeoJSON特性而不是一个FeatureCollection，那么这仅仅是一个层而不是一个
浏览 1提问于2020-03-28得票数 1
2回答
我正在尝试创建一个具有多个图层的地图，我可以将这些图层设置为可见的false或true。这是我设置地图的代码：
this.map = new OlMap({
target: 'map',
layers: [
new OlTileLayer({
source: new OSM()
}), new Group({
layers: [
new OlTi
浏览 2提问于2018-06-12得票数 0
我想用leaflet-geoman在传单地图上绘制不同类型的对象。我在overlay面板上有一个不可编辑的geojson层(农业宗地)，我想在组合框(或按钮)中选择要绘制的对象类型。它可以是标记(例如树)或多段线(树篱...)或者polygone (森林...)有不同的风格(颜色，标记，工具提示...)：森林是绿色的，树有一些图标，树篱是棕色的，森林是绿色填充的……就在绘图结束后，我想显示一个弹出窗口，以填充一些信息，例如对象的名称。我想把所有这些绘图放在一个可以用窗格控件显示/隐藏的层中。根据对象的类型，我可以有不同的层。至少，我希望获得所有绘制的对象(带有额外的信息...)并将其保存在g
浏览 75提问于2021-11-13得票数 0
回答已采纳
我在宣传单中有一个geojson层，我希望按年过滤。此geojson图层是使用pointToLayer从geojson文件创建的。
问题是，我不确定这个geoJsonLayer是否是一个数组？我对它的数据结构非常困惑，因此，如何过滤它。当我对它执行console.log操作时，数据是这样嵌套的：
Object { options: Object，_layers: Object，_leaflet_id: 259，_initHooksCalled: true，_map: Object }
点击_layers，我可以得到一个对象列表(这些是我当前在地图上看到的点)。如果我单击其中一个对象，我可以访问
浏览 2提问于2016-10-31得票数 1
我在我的项目中使用KonvaJs。我正在使用Konva.Group俱乐部一些项目，如Konva.Image，Konva.Rect在一起。但我在将他们放在mousemove活动的特殊位置时，也面临着一些挑战。我的Konva.Group是这样的：
var group = new Konva.Group({
x: 0,
y: 0
});
一个像这样的图像和矩形
var border = new Konva.Rect({
x: 115,
y: 35,
width: 116,
height: 128,
fill
浏览 6提问于2016-08-09得票数 0
回答已采纳
1回答
By default this script will run 4,000 training steps. Each step chooses ten images at random from the training set, finds their bottlenecks from the cache, and feeds them into the final layer to get predictions. Those predictions are then compared against the actual labels to update the final layer&
浏览 0提问于2017-06-18得票数 0
在SVG中给出以下rect。
<rect xmlns="http://www.w3.org/2000/svg" x="72.036" y="156.473" transform="matrix(0.1727 -0.985 0.985 0.1727 -83.7081 215.7814)" style="fill:none;stroke:#020202;stroke-width:0.5;stroke-miterlimit:10;" width="29.129" height="2.498&
浏览 3提问于2017-09-07得票数 0
它在iphone模拟器中工作得很好。但不是在ipad模拟器中。当应用程序launches.Copy将相同的代码粘贴到ipad window应用程序中时，我只是在尝试使电影加载。但是它加载并且只给出白屏，并且什么都没有发生。
谁能告诉我，我应该做些什么改变，才能在ipad模拟器中工作，就像在iphone模拟器中一样？
浏览 0提问于2010-04-09得票数 0
回答已采纳
我有一个向layerGroup添加许多圆形标记的函数 const renderCatalogQuery = (catalog, catalogLayer) => {
catalogLayer.clearLayers();
catalogLayerControl.removeLayer(catalogLayer);
catalogLayerControl.addOverlay(catalogLayer, catalog.name);
for (let [name,lon,lat] of catalog.currentQuery) {
let
浏览 41提问于2020-07-07得票数 1
我可以在canvas konvaJS中插入表格表单canvas datagrid库(TonyGermanery)吗？我试着插入表，但不起作用
浏览 27提问于2020-03-12得票数 0
回答已采纳
我正在通过以下方式向图层组添加标记：
var lGroup1 = new L.FeatureGroup(),
lGroup2 = new L.FeatureGroup(),
lGroup3 = new L.FeatureGroup();
new compMarker([50.07045,8.24660]).bindPopup('<p>Something</p>').addTo(lGroup1).on('click', onClick);
new compMarker([50.07045,8.24660]).bindPop
浏览 2提问于2016-02-02得票数 5
1回答
我有一张流程图-使用R中的宣传单
library(leaflet)
m <- leaflet(AM_Peak) %>%
addTiles('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>,
<a href="http://creativecommons.org/licenses/by/3.
浏览 1提问于2017-06-13得票数 3
我要将组添加到ArcGIS Online地图上的几个图层中。我正在关注这个链接：
但我在图层底部看不到Create Group选项。
这是我所看到的：
浏览 3提问于2015-12-22得票数 2
我想显式地选择多个层(通过引用，而不是通过名称或任何其他涉及重新搜索我已经引用的内容的内容！)并将它们合并到Adobe的Javascript中(也称为.Extendscript)。
我可以设置文档的activeLayer，但它不需要一组层。
浏览 0提问于2012-05-03得票数 3
回答已采纳
与shape的例子一样，这里有x，y，rotation等https://konvajs.github.io/docs/select_and_transform/Transform_Events.html react-konva中的图像也扩展了形状。 如何在react-konva中获取image(使用transformer)的这些值。
浏览 15提问于2019-01-14得票数 0
回答已采纳
如何使用FOR循环和konvajs创建具有不同名称(如"Line_“+ i)的n行？
我尝试了下面的语句：
var eval("Line_" + i) = new kanva.line()
但它不起作用。
浏览 0提问于2018-04-20得票数 0
2回答
我正在尝试用flex构建一个webmap应用程序。为此，我有一个fxg文件，它代表地图。它在一个也有一些元素，如POI，文本等在这一组。我用scaleX和scaleY缩放，这对地图很好。
但问题是:所有儿童的变焦也是如此。我不想这样。它们应该保持在地图上相同的位置和相同的大小。
下面是as函数的一些代码
<fx:Script>
<![CDATA[
import mx.skins.Border;
[Bindable]
public var hoehe:Number = 1;
[Bindable]
浏览 0提问于2011-06-16得票数 1
回答已采纳
我尝试分别运行fit_one_cycle函数的不同时期；保存模型，加载它，并开始一个新的时期：
learn = language_model_learner(data, AWD_LSTM, drop_mult=0.5, pretrained=False).to_fp16()
learn.load('/content/gdrive/My Drive/Language Model/language_model')
learn.load_encoder('/content/gdrive/My Drive/Language Model/model_encoder');
浏览 1提问于2019-10-19得票数 0
我已经使用KineticJS启动了一个项目，到目前为止，我已经能够完成我想要的一切，除了沿着拱形(循环)路径的文本。我需要的是一个庞大的，可拖动的循环文本，我需要能够跟踪对象。TextPath对象对我不起作用，但我已经能够使用本例中的代码来启动
我能够完成的是采取这段代码和移动层(使用滑块控件)和调整属性(字体，半径，角度)，以获得我正在寻找的效果。我想要做的是能够创建多个层，拖动层，并保持每一层的选择。由于我对HTML5(和KineticJS)还不熟悉，也不完全理解layer对象，所以我有几个问题可以帮助我解决我的问题。1.)我能拖一层吗？我似乎不能使这一工作，即使我使这一层拉力。2.)一个
浏览 2提问于2013-07-29得票数 0
我可以使用angular leaflet指令将Geojson层添加到leaflet地图中。
我还可以添加leaflet绘制控件并创建新的图层(多边形、折线等)。
但是，似乎没有直接的方法来启用对指令加载的GeoJSON层的编辑。
代码看起来像这样：
angular.extend($scope, {
controls: {
draw: {}
},
geojson: {
...........
浏览 3提问于2014-12-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
