47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const width = 600;
|
|
const height = 600;
|
|
const svg = d3.select("svg")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
// let pict1 = drawSmile(svg);
|
|
// pict1.attr("transform", `translate(400, 400) scale(1.5, 1.5) rotate(180)`);
|
|
|
|
// let pict = drawSmile(svg);
|
|
// pict.attr("transform", "translate(200, 200)");
|
|
|
|
setting.applyButton.addEventListener("click", () => {
|
|
draw(setting);
|
|
})
|
|
setting.clearButton.addEventListener("click", () => {
|
|
svg.selectAll('*').remove()
|
|
})
|
|
|
|
enableAnimCheckbox.addEventListener("change", () => {
|
|
let isChecked = enableAnimCheckbox.checked;
|
|
if (isChecked) {
|
|
startAnimButton.display = "inline-block";
|
|
animTypeSelect.display = "inline-block";
|
|
applyButton.display = "none";
|
|
}
|
|
else {
|
|
startAnimButton.display = "none";
|
|
animTypeSelect.display = "none";
|
|
applyButton.display ="inline-block";
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
const draw = (dataForm) => {
|
|
const svg = d3.select("svg")
|
|
let pict = drawSmile(svg);
|
|
pict.attr("transform", `
|
|
translate(${dataForm.cx.value},
|
|
${dataForm.cy.value})
|
|
scale(${dataForm.sx.value},
|
|
${dataForm.sy.value})
|
|
rotate(${dataForm.r.value})`);
|
|
|
|
} |