我正在尝试使用kinetic-v4.7.2.min.js在画布上绘画。当用户触摸该图层时,它会成功绘制线条。我正在使用jsFiddle来实现此功能。 我怎样才能清除这个ractangle层&我该如何将该层容器保存为图像?
// create a stage and a layer
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// an empty stage does not emit mouse-events
// so fill the stage with a background rectangle
// that can emit mouse-events
var background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: 'white',
stroke: 'black',
strokeWidth: 1,
})
layer.add(background);
layer.draw();
// a flag we use to see if we're dragging the mouse
var isMouseDown = false;
// a reference to the line we are currently drawing
var newline;
// a reference to the array of points making newline
var points = [];
// on the background
// listen for mousedown, mouseup and mousemove events
background.on('mousedown', function () {
onMousedown();
});
background.on('mouseup', function () {
onMouseup();
});
background.on('mousemove', function () {
onMousemove();
});
// On mousedown
// Set the isMouseDown flag to true
// Create a new line,
// Clear the points array for new points
// set newline reference to the newly created line
function onMousedown(event) {
isMouseDown = true;
points = [];
points.push(stage.getMousePosition());
var line = new Kinetic.Line({
points: points,
stroke: "green",
strokeWidth: 5,
lineCap: 'round',
lineJoin: 'round'
});
layer.add(line);
newline = line;
}
// on mouseup end the line by clearing the isMouseDown flag
function onMouseup(event) {
isMouseDown = false;
}
// on mousemove
// Add the current mouse position to the points[] array
// Update newline to include all points in points[]
// and redraw the layer
function onMousemove(event) {
if (!isMouseDown) {
return;
};
points.push(stage.getMousePosition());
newline.setPoints(points);
// use layer.drawScene
// this is faster since the "hit" canvas is not refreshed
layer.drawScene();
}
任何帮助都将不胜感激!!
感谢。
答案 0 :(得分:2)
使用toDataURL()
方法:
$('button').on('click', function () {
var img = $('.kineticjs-content').find('canvas').get(0).toDataURL("image/png");
$('body').prepend('<img src="' + img + '">');
});