2

我正在尝试制作 KineticJs html 5 自定义形状。

但它不适用于谷歌浏览器。在 Firefox 中不可拖动，形状大小也不相同。

谁能告诉我为什么？

实时代码http://jsfiddle.net/prantor19/wGE2a/8/

var stage = new Kinetic.Stage({
    container: 'canvas-container',
    width: 500,
    height: 500,
});

var layer = new Kinetic.Layer();

drawWindow = function(canvas) {
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(this.attrs.x,this.attrs.y);
    context.lineTo(this.attrs.width,this.attrs.y);
    context.lineTo(this.attrs.width,this.attrs.height);
    context.lineTo(this.attrs.x,this.attrs.height);
    context.closePath();
    context.clip();
    context.drawImage(img,this.attrs.img_x,this.attrs.img_y);
}

img = document.createElement('img');
img.src= "http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG";

var window1 = new Kinetic.Shape({
    drawFunc: drawWindow,
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    img:img,
    img_x:0,
    img_y:0,
    draggable: true
});

var window2 = new Kinetic.Shape({
    drawFunc: drawWindow,
    x: 10,
    y: 60,
    width: 100,
    height: 100,
    img:img,
    img_x:-250,
    img_y:0,
    draggable: true
});

pointercursor = function() {
    document.body.style.cursor = 'pointer';
}
defaultCursor = function() {
    document.body.style.cursor = 'default';
}

window1.on('mouseover',pointercursor );
window1.on('mouseout', defaultCursor);
window2.on('mouseover',pointercursor );
window2.on('mouseout', defaultCursor);

layer.add(window1);
layer.add(window2);

stage.add(layer);
4

2 回答 2

1

您的脚本中有错误

无法从画布获取图像数据，因为画布已被跨域数据污染。kinetic-v4.3.2-beta.js:4365 未捕获错误：SecurityError: DOM Exception 18

Chrome 拒绝在 cavas 上处理跨域图像。

对于拖动，您需要为形状添加此设置描边

stroke: 'black',

并在 drawFunc 结束时

canvas.fillStroke(this);

这是你的我的工作版本

http://jsfiddle.net/W7SGT/

于 2013-03-07T17:06:41.910 回答
1

在 KienticJS 中绘制自定义形状时，您应该使用画布渲染器，否则它无法处理形状上的事件。这是关于自定义形状的教程：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

您还可以查看 Kinetic.Image 形状以了解它如何专门处理图像：

https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js

于 2013-03-08T03:05:16.660 回答