1

KineticJSを使用すると、シェイプのストローク（私の場合はアーク）のクリックイベントはまったく発生しません。

私のコードはそこにあります http://jsfiddle.net/mPsfm/

js

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

var arc = new Kinetic.Shape({
        drawFunc: function(canvas) {

            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 10;
            var startAngle = 0;
            var endAngle = 135 * Math.PI / 180;
            ctx.arc(50, 50, 40, startAngle, endAngle, false);
            ctx.stroke();
        }
});

arc.on('click', function() {
    alert("click detected");
 });

layer.add(arc);
stage.add(layer);

どうすればこれをうまく機能させることができますか？

前もって感謝します。

4

2 に答える 2

0

EliteOctagon に感謝します。

最終的なコードはこちらです！

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

var arc = new Kinetic.Shape({
        drawFunc: function(canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 10;
            var startAngle = 0;
            var endAngle = 135 * Math.PI / 180;
            ctx.arc(50, 50, 40, startAngle, endAngle, false);
            ctx.stroke();
            canvas.fillStroke(this);
        },
    drawHitFunc: function(canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.lineWidth = 10;
            var startAngle = 0;
            var endAngle = 135 * Math.PI / 180;
            ctx.arc(50, 50, 40+ctx.lineWidth, startAngle, endAngle, false);
            ctx.lineTo(50*Math.cos(endAngle)+40,50*Math.sin(endAngle)+40);
            ctx.lineTo(50*Math.cos(endAngle/2)+40,50*Math.sin(endAngle/2)+40);
            ctx.lineTo(50*Math.cos(startAngle)+40,50*Math.sin(startAngle)+40);
            ctx.stroke();
            canvas.fillStroke(this);
        }
});

arc.on('click', function() {
    alert("click detected");
});


layer.add(arc);
stage.add(layer);
于 2013-01-23T01:26:09.693 に答える
0

http://jsfiddle.net/mPsfm/3/

あなたは1つの小さな行が欠けていました:

 canvas.fillStroke(this);

これにより、カスタム形状関数が作成されます。

 var arc = new Kinetic.Shape({
    drawFunc: function(canvas) {

        var ctx = canvas.getContext();
        ctx.beginPath();
        ctx.lineWidth = 10;
        var startAngle = 0;
        var endAngle = 135 * Math.PI / 180;
        ctx.arc(50, 50, 40, startAngle, endAngle, false);
        ctx.stroke();
        canvas.fillStroke(this);
    }
 });
于 2013-01-21T15:57:29.920 に答える