<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/lufylegend-1.9.9.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"
type="text/css"></link>
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"
type="text/css"></link>
<title>画图</title>
<script type="text/javascript">
//使用库件内置的init方法进行初始化
// 50：游戏速度设定
// “myledend”，传入div的ID,库件初始化会将Canvas加入到此div内部
//500：canvas的宽
//600：canvas的高
//main：游戏初始化完成后，调用此函数
init(100, "mylegend", 1200, 1200, main);
var loader;//加载器
var bitmap;//存储图片对象
var layer;//层对象
var bitmapdata;
var field;
function main() {
// LGlobal.setDebug(false);
//创建加载对象
loader = new LLoader();
layer = new LSprite();//创建层
loader.addEventListener(LEvent.COMPLETE, loadBitmadata);//给loader添加onload事件
loader.load("girl1.jpg", 'bitmapData');//载图加片
bitmapdata = new LBitmapData(loader.content);//保存和读取image对象
layer.graphics.beginBitmapFill(bitmapdata);
bitmap = new LBitmap(bitmapdata);//将image对象显示到Canvas
addChild(layer);
layer.addChild(bitmap);
field=new LTextField();
field.x=50;
field.y=50;
field.setType(LTextFieldType.INPUT);
layer.addChild(field);
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, translate);
var canvas = document.getElementById("mylegend");
canvas.style.marginLeft = "100px";
var canvas = document.getElementById("mylegend");
canvas.style.marginTop = "50px";
bitmap.paddingTop="100px";
}
//显示图片
function loadBitmadata(event) {
layer.x = 100;//图片坐标
layer.y =20;//图片坐标
}
//剪切
function cutPicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "";
var text = document.getElementById("textinput");
text.style.display = "none";
var x = document.getElementById('xchange').value;
var y = document.getElementById('ychange').value;
var width = document.getElementById('wchange').value;
var heigth = document.getElementById('hchange').value;
//layer层
/* layer.x = x;
layer.y = y;
layer.width = width;
layer.height = heigth;*/
//图片
bitmapdata.x = x;
bitmapdata.y = y;
bitmapdata.width = width;
bitmapdata.height = heigth;
}
//旋转
function rotatePicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "none";
var value = document.getElementById('range').value;
var angle=45*Math.PI/180;
var x=bitmap.x;
var y=bitmap.y;
var width=bitmap.width;
//bitmapdata.translate(20,20);
bitmap.rotate= value;//旋转角度60
}
//改变透明度
function alphaPicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "none";
var value = document.getElementById('alphachange').value;
layer.alpha = value;//透明度
}
//改变图片缩放
function chanageSizePicture() {
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "none";
var valueX = document.getElementById('widthchange').value;
var valueY = document.getElementById('heightchange').value;
layer.scaleX = valueX;
layer.scaleY = valueY;
}
//改变文字
function changetext()
{
var alpha = document.getElementById("alphainput");
alpha.style.display = "none";
var chanageSize = document.getElementById("chanageSizeinput");
chanageSize.style.display = "none";
var rotate = document.getElementById("rotateinput");
rotate.style.display = "none";
var cut = document.getElementById("cutinput");
cut.style.display = "none";
var text = document.getElementById("textinput");
text.style.display = "";
}
//平移
function translate(event) {
//往左移
if (event.keyCode == 37) {
if (layer.x > 0)
layer.x = layer.x - 1;
}
//往右移
if (event.keyCode == 39) {
if (layer.x + bitmap.width < 800)
layer.x = layer.x + 1;
}
//往上移
if (event.keyCode == 38) {
if (layer.y>bitmap.y)//图片的y坐标要小于canvas的y坐标
layer.y = layer.y - 1;
}
//往下移
if (event.keyCode == 40) {
if (layer.y + bitmap.height < 600)
layer.y = layer.y + 1;
}
}
function doOriginal() {
//将原图片清除清除
removeChild(layer);
//创建加载对象
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE, original);//给loader添加onload事件
loader.load(imageurl, "bitmapDat
csnvas在线画图及图片处理工具
5星 · 超过95%的资源 需积分: 11 56 浏览量
2016-06-11
06:35:50
上传
评论
收藏 9.19MB ZIP 举报 
csnvas在线画图及图片处理工具 （440个子文件） 
bootstrap.css 144KB bootstrap.min.css 120KB bootstrap.min.css 103KB style.css 103KB animate.css 60KB glyphicons.css 52KB font-awesome.css 27KB bootstrap-theme.css 26KB bootstrap-theme.min.css 23KB font-awesome.min.css 21KB plugins.css 21KB halflings.css 20KB bootstrap-responsive.min.css 16KB datepicker.css 16KB select2_metro.css 14KB style-metro.css 14KB datetimepicker.css 12KB chosen.css 12KB fullcalendar.css 11KB uniform.default.css 11KB dropzone.css 10KB style-responsive.css 9KB light.css 9KB inbox.css 9KB purple.css 7KB brown.css 7KB blue.css 7KB grey.css 7KB default.css 7KB pricing-tables.css 7KB timeline.css 6KB bootstrap-toggle-buttons.css 6KB clockface.css 6KB search.css 6KB main.css 5KB profile.css 5KB bootstrap-modal.css 4KB daterangepicker.css 4KB jquery.fancybox.css 4KB DT_bootstrap.css 4KB jquery.nestable.css 3KB blog.css 2KB login.css 2KB login-soft.css 2KB bootstrap-wysihtml5.css 2KB colorpicker.css 2KB bootstrap-fileupload.css 2KB bootstrap-tag.css 2KB style-non-responsive.css 2KB error.css 2KB news.css 2KB multi-select-metro.css 2KB lock.css 2KB jquery.gritter.css 2KB timepicker.css 2KB coming-soon.css 2KB jquery.fileupload-ui.css 1KB bootstrap-tree.css 1KB jqvmap.css 907B jquery.tagsinput.css 904B promo.css 770B email.css 708B invoice.css 566B jquery.rater.css 507B print.css 362B about-us.css 286B jquery.easy-pie-chart.css 141B bootstrap-responsive1.min.css 0B jquery-ui-1.10.1.custom.min.css 0B jquery.ui.slider.css 0B css 0B glyphicons-regular.eot 143KB fontawesome-webfont.eot 37KB glyphiconshalflings-regular.eot 33KB glyphicons-halflings-regular.eot 20KB
ajax-loading.gif 29KB fancybox_loading.gif 4KB progressbar.gif 3KB loading.gif 3KB select2-spinner.gif 2KB animated-overlay.gif 2KB star.gif 1KB ie-spacer.gif 43B blank.gif 43B .gitignore 0B
new.html 16KB Image.html 10KB favicon.ico 569B huatu.iml 335B huatu3.iml 335B
image4.jpg 490KB girl.jpg 393KB image2.jpg 373KB image3.jpg 340KB item_img.jpg 293KB image1.jpg 246KB item_img1.jpg 244KB face.jpg 169KB image5.jpg 117KB earth.jpg 116KB共 440 条
- 1
- 2
- 3
- 4
- 5
资源评论
toskeyjohn2019-06-13实在太好用啦
