Question

var line = new Kinetic.Line({ points: [415, 115,617,234], stroke: 'gray', tension: 2});
line.addEventListener('click',function(e){ 
debugger; 
// alert(e.x+'.'+ e.y); 
// popup; 
});

单击该行时，应该选中它。单击其他位置时，应该取消选中该行。如果按下删除按钮，则选择该行后该行应该被销毁如何操作。

Answer 1

您需要将行添加到舞台以跟踪事件，如：

//some html
<div id="container" style="border-style:solid;border-width:1px;"></div>

javascript部分

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});

var layer = new Kinetic.Layer();

var redLine = new Kinetic.Line({
    points: [415, 115,617,234],
    stroke: 'gray',
    strokeWidth: 15,
    tension: 2
});
//use .on for event
redLine.on('click', function(e) {
    console.log(this.attrs["points"]);
    //gives::  [Object { x=415, y=115}, Object { x=617, y=234}] 
}, false);

layer.add(redLine);
stage.add(layer);

演示jsFiddle

Answer 2

仅供参考：KineticJS是一个画布库。要先使用画布，你必须制作一个。

<html>
  <head></head>
  <body>
    <!--Some page content here -->
    <!--Here you want to draw your line -->
    <!--Make a container for the canvas, which kinetic will draw the line on -->
    <div id="myCanvasContainer">
      <!--Inside here your canvas will be created -->
    </div>
  </body>
</html>

然后，JS代码。首先，获取kinetic library。

//The stage creates the <canvas> element, it's like desktop
var stage = new Kinetic.Stage({
   container: "myCanvasContainer",
   height: 500,
   width: 600
})

//A layer is like a paper, you can draw things on it, and then hide or query it
var layer = new Kinetic.Layer()

//Let's make our line
var line = new Kinetic.Line({
   points: [5, 30, 300, 250], //[point1(x), point1(y), point2(x), point2(y)]
   stroke: "lightcoral",
   strokeWidth: 10
}).on("click", function(e){ //Here you subscribe to the click event

   //Gets an array of the points [(Point){x=5, y=30}, (Point){x=300, y=250}]
   alert(this.attrs["points"]) 
})

//Draw to paper
layer.add(line)

//Make paper visible on desktop
stage.add(layer)

希望你对KineticJS有一些基本的了解。这是一个非常有趣的图书馆。

Fiddle

在点击线我想知道点

2 个答案: