[英]KineticJS: How can I include custom canvas shapes in a toDataURL function
我的问题始于KineticJS的版本5,在那之前这不是问题。 可以使用stage.toDataURL函数将原生KineticJS形状(例如正方形和圆形)保存到图像文件中。 但这不适用于使用普通画布方法(例如beginPath();)绘制的非运动学形状。 和canvas.fill(); (版本4做得很好)。 以下代码绘制了两个矩形,一个红色和一个蓝色。 红色是自定义的,蓝色是本机动力学矩形。
<body>
<div id="container"></div>
<button id="save">
Save as image
</button>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"> </script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var box = new Kinetic.Rect({
x: 400,
y: 80,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box);
stage.add(layer);
var canvas = layer.getCanvas().getContext('2d');
canvas.beginPath();
canvas.setAttr('strokeStyle', 'black');
canvas.setAttr('fillStyle', '#FF2222');
canvas.setAttr('lineWidth', 8);
canvas.rect(50,80,100,50);
canvas.stroke();
canvas.fill();
document.getElementById('save').addEventListener('click', function() {
stage.toDataURL({
callback: function(dataUrl) {
window.location.href = dataUrl;
}
});
}, false);
</script>
</body>
这两种形状都会出现,但是在toDataURL函数生成的图像中只有蓝色矩形出现。 它们的绘制方式在KineticJS 5中已更改,您可以在其中设置fillStyle等的属性。因此,我认为这可能与它有关,或者可能是在将图层添加到图层后添加了自定义形状的事实。阶段...
您是正确的,在最新版本之间,已经发生了很大变化,并且这可能破坏了绘图功能。
您应该查阅每个项目的官方文档 ,但是基本上,自定义形状的属性已稍作更新...首先,“ StrokeStyle”不再是有效属性。 只需使用“笔画”即可。 与FillStyle相同。
另外-'dashArray'不再有效,现在只是'dash'-所以我确定还有更多的更改使我不记得了...对,例如'lineWidth'现在为'strokeWidth ” ...
另外-您显示或不显示笔触和填充的方式已经改变...是的,您过去所做的大部分方式都略有变化。 'drawFunc'现在也是'sceneFunc'...
var ctx = layer.getContext();
var customShape01 = new Kinetic.Shape({
sceneFunc: function(ctx) {
ctx.beginPath();
ctx.moveTo(162.1, 213.8);
ctx.bezierCurveTo(162.1, 213.8, 180.7, 215.3, 193.5, 214.5);
ctx.bezierCurveTo(205.8, 213.7, 221.8, 212.3, 222.8, 221.4);
ctx.bezierCurveTo(222.9, 221.7, 222.9, 222.0, 222.9, 222.3);
ctx.bezierCurveTo(222.9, 232.4, 204.6, 232.7, 192.0, 227.1);
ctx.bezierCurveTo(179.4, 221.5, 163.1, 213.8, 162.1, 213.8);
ctx.closePath();
ctx.fillStrokeShape(this);
},
id: 'customShape01',
fill: 'rgb(255, 0, 255)',
stroke: 'black',
strokeWidth: 2,
lineJoin: 'round',
dash: [5,5],
dashEnabled: 'true',
strokeEnabled: 'true'
});
查看完整的工作示例(您必须允许弹出窗口)。 http://jsfiddle.net/axVXN/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.