Question

每次单击画布时，此代码都会创建矩形。然后将每个矩形对象推入一个数组中。我想创建的每个矩形在单击时都能返回自己的数组索引。

我想用此做些什么？

我的想法是一个带GUI的软件，允许创建带有输入和输出端口的模块/节点，并用线连接它们（如Max / MSP，Pure Data，Quartz Composer，Reaktor，NodeRed等）。为了能够将模块相互连接，他们需要能够返回自己的ID，以便模块外部的功能可以连接它们。

＆＃13;

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = new createModule();
  rectArray.push(newRect);
});

function createModule() {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;

  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    alert("clicked");
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
}
stage.draw(); // draw so we can see click rect.

＆＃13;

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

＆＃13;

Answer 1

取决于您的需求。你可以将索引（等于推入数组之前的长度）给你的“构造函数”（即使你真的没有在这里创建一个对象IMO）：

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = new createModule(rectArray.length);
  rectArray.push(newRect);
});

function createModule(index) {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;

  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    alert("clicked on " + index);
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
}
stage.draw(); // draw so we can see click rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

但是如果您的数组正在被修改，那么您应该跟踪对象的实例（var self = this;）并使用indexOf rectArray来动态查找其索引：

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = new createModule();
  rectArray.push(newRect);
});

function createModule() {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;
  var self = this;
  
  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    var index = rectArray.indexOf(self);
    alert("clicked on " + index);
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
}
stage.draw(); // draw so we can see click rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

Answer 2

首先：您需要在createModule函数中返回创建的rect。在调用该函数时，您不需要new关键字。

然后你可以查询点击的矩形的索引，如rectArray.indexOf(evt.target)

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = createModule();
  rectArray.push(newRect);
});

function createModule() {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;

  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    alert(rectArray.indexOf(evt.target));
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
  return rect;
}
stage.draw(); // draw so we can see click rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

数组中的JS对象如何返回自己的数组索引？

2 个答案: