<script type="text/javascript">
var lc = null;
var tools;
var strokeWidths;
var colors;
var fonts;
var iText = 2; // hinzu gefuegt fuer Schriftart
var setCurrentByName;
var findByName;
// the only LC-specific thing we have to do
var containerOne = document.getElementsByClassName('literally')[0];
var showLC = function () {
lc = LC.init(containerOne, {
snapshot: JSON.parse(localStorage.getItem('drawing')),
defaultStrokeWidth: 10,
strokeWidths: [10, 20, 50],
secondaryColor: 'transparent'
});
window.demoLC = lc;
var save = function () {
localStorage.setItem('drawing', JSON.stringify(lc.getSnapshot()));
}
lc.on('drawingChange', save);
lc.on('pan', save);
lc.on('zoom', save);
$("#open-image").click(function () {
window.open(lc.getImage({
scale: 1, margin: { top: 10, right: 10, bottom: 10, left: 10 }
}).toDataURL());
});
$("#change-size").click(function () {
lc.setImageSize(null, 200);
});
$("#reset-size").click(function () {
lc.setImageSize(null, null);
});
$("#clear-lc").click(function () {
lc.clear();
});
// Set up our own tools...
tools = [
{
name: 'pencil',
el: document.getElementById('tool-pencil'),
tool: new LC.tools.Pencil(lc)
}, {
name: 'eraser',
el: document.getElementById('tool-eraser'),
tool: new LC.tools.Eraser(lc)
}, {
name: 'text',
el: document.getElementById('tool-text'),
tool: new LC.tools.Text(lc)
}, {
name: 'line',
el: document.getElementById('tool-line'),
tool: new LC.tools.Line(lc)
}, {
name: 'arrow',
el: document.getElementById('tool-arrow'),
tool: function () {
arrow = new LC.tools.Line(lc);
arrow.hasEndArrow = true;
return arrow;
}()
}, {
name: 'dashed',
el: document.getElementById('tool-dashed'),
tool: function () {
dashed = new LC.tools.Line(lc);
dashed.isDashed = true;
return dashed;
}()
}, {
name: 'ellipse',
el: document.getElementById('tool-ellipse'),
tool: new LC.tools.Ellipse(lc)
}, {
name: 'tool-rectangle',
el: document.getElementById('tool-rectangle'),
tool: new LC.tools.Rectangle(lc)
}, {
name: 'tool-polygon',
el: document.getElementById('tool-polygon'),
tool: new LC.tools.Polygon(lc)
}, {
name: 'tool-select',
el: document.getElementById('tool-select'),
tool: new LC.tools.SelectShape(lc)
}
];
strokeWidths = [
{
name: 1,
el: document.getElementById('sizeTool-1'),
size: 1
}, {
name: 2,
el: document.getElementById('sizeTool-2'),
size: 2
}, {
name: 5,
el: document.getElementById('sizeTool-5'),
size: 5
}, {
name: 10,
el: document.getElementById('sizeTool-10'),
size: 10
}, {
name: 20,
el: document.getElementById('sizeTool-20'),
size: 20
}, {
name: 50,
el: document.getElementById('sizeTool-50'),
size: 50
}
];
colors = [
{
name: 'black',
el: document.getElementById('colorTool-black'),
color: '#000000'
}, {
name: 'blue',
el: document.getElementById('colorTool-blue'),
color: '#0000ff'
}, {
name: 'red',
el: document.getElementById('colorTool-red'),
color: '#ff0000'
}
];
// hinzu gefueft fuer Schriftart Anfang
fonts = [
{
name: 'Arial',
el: document.getElementById('fontTool-arial'),
font: '20px Arial'
},
{
name: 'Baskerville',
el: document.getElementById('fontTool-baskerville'),
font: '20px Baskerville'
},
{
name: 'Times New Roman',
el: document.getElementById('fontTool-times-new-roman'),
font: '20px Times New Roman'
}
];
// hinzu gefueft fuer Schriftart Ende
setCurrentByName = function (ary, val) {
ary.forEach(function (i) {
$(i.el).toggleClass('current', (i.name == val));
});
};
findByName = function (ary, val) {
var vals;
vals = ary.filter(function (v) {
return v.name == val;
});
if (vals.length == 0)
return null;
else
return vals[0];
};
// Wire tools
tools.forEach(function (t) {
$(t.el).click(function () {
var sw;
lc.setTool(t.tool);
setCurrentByName(tools, t.name);
setCurrentByName(strokeWidths, t.tool.strokeWidth);
$('#tools-sizes').toggleClass('disabled', (t.name == 'text'));
});
});
setCurrentByName(tools, tools[0].name);
// Wire Stroke Widths
// NOTE: This will not work until the stroke width PR is merged...
strokeWidths.forEach(function (sw) {
$(sw.el).click(function () {
lc.trigger('setStrokeWidth', sw.size);
setCurrentByName(strokeWidths, sw.name);
})
})
setCurrentByName(strokeWidths, strokeWidths[0].name);
lc.trigger('setStrokeWidth', strokeWidths[0].size);
// Wire Colors
colors.forEach(function (clr) {
$(clr.el).click(function () {
lc.setColor('primary', clr.color)
setCurrentByName(colors, clr.name);
})
})
setCurrentByName(colors, colors[0].name);
// hinzu gefueft fuer Schriftart Anfang
// Wire Fonts
fonts.forEach(function (fnt) {
$(fnt.el).click(function () {
tools[iText].tool.font = fnt.font;
setCurrentByName(fonts, fnt.name);
})
})
setCurrentByName(fonts, fonts[0].name);
tools[iText].tool.font = fonts[0].font;
// hinzu gefueft fuer Schriftart Ende
};
$(document).ready(function () {
// disable scrolling on touch devices so we can actually draw
$(document).bind('touchmove', function (e) {
if (e.target === document.documentElement) {
return e.preventDefault();
}
});
showLC();
});
$('#hide-lc').click(function () {
if (lc) {
lc.teardown();
lc = null;
}
});
$('#show-lc').click(function () {
if (!lc) { showLC(); }
});
</script>
).
