Untitled diff
创建于 差异永不过期
//Problem: No user interaction causes no change to application
// Problem: No user interaction causes no change to application.
//Solution: When user interacts cause changes appropriately
// Solution: When user interacts, cause changes appropriately.
var color = $(".selected").css("background-color");
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var context = $canvas[0].getContext("2d");
var lastEvent;
var lastEvent;
var mouseDown = false;
var mouseDown = false;
// When clicking on control list items
//When clicking on control list items
$(".controls").on("click", "li", function() {
$(".controls").on("click", "li", function(){
// Deselect sibling elements
//Deselect sibling elements
$(this).siblings().removeClass("selected");
$(this).siblings().removeClass("selected");
// Select clicked element
//Select clicked element
$(this).addClass("selected");
$(this).addClass("selected");
// Cache current color
//cache current color
color = $(this).css("background-color");
color = $(this).css("background-color");
});
});
//When "New Color" is pressed
// When "New Color" is clicked
$("#revealColorSelect").click(function(){
$("#revealColorSelect").click(function(){
//Show color select or hide the color select
// Show color select or hide the color select
changeColor();
changeColor();
$("#colorSelect").toggle();
$("#colorSelect").toggle();
});
});
//update the new color span
// Update the new color span
function changeColor() {
function changeColor() {
var r = $("#red").val();
var r = $("#red").val();
var g = $("#green").val();
var g = $("#green").val();
var b = $("#blue").val();
var b = $("#blue").val();
$("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
$("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
}
}
//When color sliders change
// When color sliders change
$("input[type=range]").change(changeColor);
$("input[type=range]").change(changeColor);
//When "Add Color" is pressed
// When "Add Color" is pressed
$("#addNewColor").click(function(){
$("#addNewColor").click(function(){
//Append the color to the controls ul
// Append the color to the control list
var $newColor = $("<li></li>");
var $newColor = $("<li></li>");
$newColor.css("background-color", $("#newColor").css("background-color"));
$newColor.css("background-color", $("#newColor").css("background-color"));
$(".controls ul").append($newColor);
$(".controls ul").append($newColor);
//Select the new color
// Select the new color
$newColor.click();
$newColor.click();
});
});
//On mouse events on the canvas
// On mouse event on the canvas
$canvas.mousedown(function(e){
$canvas.mousedown(function(e){
lastEvent = e;
lastEvent = e;
mouseDown = true;
mouseDown = true;
}).mousemove(function(e){
}).mousemove(function(e){
//Draw lines
// Draw lines
if(mouseDown) {
if(mouseDown) {
context.beginPath();
context.beginPath();
context.moveTo(lastEvent.offsetx, lastEvent.offsety);
context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
context.lineTo(e.offsetx, e.offsety);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = color;
context.strokeStyle = color;
context.stroke();
context.stroke();
lastEvent = e;
lastEvent = e;
}
}
}).mouseup(function(){
}).mouseup(function(){
mouseDown = false;
mouseDown = false;
}).mouseLeave(function(){
}).mouseleave(function(){
$canvas.mouseup();
$canvas.mouseup();
});
});