颜色改变
1.
<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Filters Example</title>
<link href="../examples/assets/css/dark-hive/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.7.1.min.js"></script>
<script src="../Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/BoxBlurFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorMatrix.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>
<script type="text/javascript">
var img;
var stage;
var bmp;
var DELTA_INDEX;
var blurXSlider;
var blurFilter, hueFilter, constrastFilter, saturationFilter, brightnessFilter;
var redChannelFilter, greenChannelFilter, blueChannelFilter;
var colorFilter;
var slideInterval = -1;
var cm;
function init() {
img = new Image();
img.onload = handleImageLoad;
img.src = "../examples/assets/flowers_small.jpg";
}
function handleImageLoad() {
var canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
bmp = new createjs.Bitmap(img);
// 放大两倍，水平和垂直方向
bmp.scaleX = bmp.scaleY = 2;
bmp.cache(0, 0, img.width, img.height);
stage.addChild(bmp);
$(".brightnessSlider").slider({
value: 0,
min: -100,
max: 100,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".saturationSlider").slider({
value: 0,
min: -100,
max: 100,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".contrastSlider").slider({
value: 0,
min: -100,
max: 100,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".hueSlider").slider({
value: 0,
min: -100,
max: 100,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".blurYSlider").slider({
value: 0,
min: 0,
max: 30,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".blurXSlider").slider({
value: 0,
min: 0,
max: 30,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".redChannelSlider").slider({
value: 255,
min: 0,
max: 255,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".greenChannelSlider").slider({
value: 255,
min: 0,
max: 255,
disabled: false,
change: handleChange,
slide: handleSlide
});
$(".blueChannelSlider").slider({
value: 255,
min: 0,
max: 255,
disabled: false,
change: handleChange,
slide: handleSlide
});
$("#resetBtn").click(handleReset);
applyEffect();
}
function handleSlide() {
if (slideInterval == -1) {
slideInterval = setInterval(applyEffect, 250);
}
}
function handleChange() {
clearInterval(slideInterval);
slideInterval = -1;
applyEffect();
}
function applyEffect() {
var brightnessValue = $(".brightnessSlider").slider("option", "value");
var contrastValue = $(".contrastSlider").slider("option", "value");
var saturationValue = $(".saturationSlider").slider("option", "value");
var hueValue = $(".hueSlider").slider("option", "value");
var blurXValue = $(".blurXSlider").slider("option", "value");
var blurYValue = $(".blurYSlider").slider("option", "value");
var redChannelvalue = $(".redChannelSlider").slider("option", "value");
var greenChannelValue = $(".greenChannelSlider").slider("option", "value");
var blueChannelValue = $(".blueChannelSlider").slider("option", "value");
cm = new createjs.ColorMatrix();
cm.adjustColor(brightnessValue, contrastValue, saturationValue, hueValue);
colorFilter = new createjs.ColorMatrixFilter(cm);
blurFilter = new createjs.BoxBlurFilter(blurXValue, blurYValue, 2);
redChannelFilter = new createjs.ColorFilter(redChannelvalue / 255, 1, 1, 1);
greenChannelFilter = new createjs.ColorFilter(1, greenChannelValue / 255, 1, 1);
blueChannelFilter = new createjs.ColorFilter(1, 1, blueChannelValue / 255, 1);
updateImage();
}
function handleReset() {
$(".brightnessSlider").slider("option", "value", 0);
$(".saturationSlider").slider("option", "value", 0);
$(".hueSlider").slider("option", "value", 0);
$(".blurYSlider").slider("option", "value", 0);
$(".blurXSlider").slider("option", "value", 0);
$(".contrastSlider").slider("option", "value", 0);
$(".redChannelSlider").slider("option", "value", 255);
$(".greenChannelSlider").slider("option", "value", 255);
$(".blueChannelSlider").slider("option", "value", 255);
applyEffect();
}
function updateImage() {
bmp.filters = [colorFilter, blurFilter, redChannelFilter, greenChannelFilter, blueChannelFilter];
bmp.updateCache();
stage.update();
}
</script>
<style type="text/css">
/* define a width for the sliders by styling the wrapping div */
.hueSlider {
width: 100px;
}
.saturationSlider {
width: 100px;
}
.contrastSlider {
width: 100px;
}
.brightnessSlider {
width: 100px;
}
.blurXSlider {
width: 100px;
}
.blurYSlider {
width: 100px;
}
.redChannelSlider {
width: 100px;
}
.greenChannelSlider {
width: 100px;
}
.blueChannelSlider {
width: 100px;
}
</style>
</head>
<body onload="init()">
<div id="loader"></div>
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Filters</h1>
<p>Demonstrates using filters. Change the values in order to preview the results. Filters are applied on top of each other.</p>
</header>
<canvas id="testCanvas" width="960" height="250"></canvas>
<table>
<td>
<table cellspacing="7" border="0" cellpadding="3">
<tr>
<th>
<div>Brightness:</div>
</th>
<td>
<div class="brightnessSlider"></div>
</td>
<td>
<th>
<div>Contrast:</div>
</th>
<td>
<div class="contrastSlider"></div>
</td>
</td>
</tr>
<tr>
<th>
<div>Hue:</div>
</th>
<td>
<div class="hueSlider"></div>
</td>
<td>
<th>
<div>Saturation:</div>
</th>
<td>
<div class="saturationSlider"></div>
</td>
</td>
</tr>
</table>
</td>
<td>
<table cellspacing="7" border="0" cellpadding="3">
<tr>
<th rowspan="1" align="center">Blur:</th>
<td>
<div class="blurXSlider"></div>
</td>
<td>
<div class="blurYSlider"></div>
</td>
</tr>
<tr>
<th>
<div>RGB:</div>
</th>
<td>
<div class="redChannelSlider"></div>
</td>
<td>
<div class="greenChannelSlider"></div>
</td>
<td>
<div class="blueChannelSlider"></div>
</td>
</tr>
</table>
</td>
</table>
<input type="button" id="resetBtn" name="resetBtn" value="Reset" />
</body>
</html>
浙公网安备 33010602011771号