39,084
社区成员
发帖
与我相关
我的任务
分享
<script type="text/javascript">
$(function () {
function init() {
T = 0,
R = 0,
k = 0,
S = !1,
y = 2,
x = 1,
_ = {
translate: {
x: 0,
y: 0
},
scale: 1,
angle: 0,
width: 0,
height: 0
};
}
var windowWidth = $(window).width() > 640 ? 640 : $(window).width();
var screenW = windowWidth == 640 ? windowWidth * 0.4 : windowWidth * 0.60; //蒙版宽度
var screenH = 297 * screenW / 210; //蒙版高度
var screenWStart = (windowWidth - screenW) / 2; //蒙版x起始位置
var screenHStart = ($(window).height() - screenW) / 2; //蒙版x起始位置
// $('.d3').height($(window).height());
C = document.getElementById("mainCanvas"),
b = document.querySelector("#design-area"),
P = C.getContext("2d");
C.width = $(window).width();
C.height = $(window).height() - 50;
var newimages = [],
loadedimages = 0,
arr = [];
//var arr = ['images/111.jpg', 'images/8.png', 'images/1234.png'];
function imageloadpost() {
loadedimages++;
if (loadedimages == arr.length) {
init();
_.width = newimages[1].width > 640 ? newimages[1].width / 2 : newimages[1].width;
_.height = newimages[1].height * _.width / newimages[1].width;
a();
$('#loading').hide();
}
}
function newImg(arr) {
$('#loading').show();
for (var i = 0; i < arr.length; i++) {
newimages[i] = new Image()
newimages[i].src = arr[i];
console.log(arr[i]);
if (newimages[i].complete) {
//alert("1");
imageloadpost()
} else {
newimages[i].onload = function () {
//alert("2");
imageloadpost()
}
}
}
}
// _.width=img.width;
// _.height=img.height;
// a()
// img0.src="images/333.jpg"; //T桖图images[0]
// img1.src="images/333.jpg"; //上传图images[2]
// img2.src="images/8.png"; //裁切区域images[1]
// img3.src="images/1234.png"; //边框图片images[2]
function a(b) {
P.clearRect(0, 0, C.width, C.height),
P.save();
var t = _.angle * Math.PI / 180,
e = _.scale * Math.cos(t),
a = _.scale * Math.sin(t),
n = -_.scale * Math.sin(t),
i = _.scale * Math.cos(t);
//P.globalCompositeOperation="source-atop" ;
if (b) { //拖动的时候
//console.log(_.translate.x+248/2+82);
P.setTransform(e, a, n, i, _.translate.x + screenW / 2 + screenWStart, _.translate.y + screenW / 2 + screenHStart);
P.drawImage(newimages[1], -_.width / 2, -_.height / 2, _.width, _.height);
P.setTransform(1, 0, 0, 1, 0, 0);
P.globalAlpha = 0.2;
//P.globalCompositeOperation="darker" ;
P.drawImage(newimages[2], screenWStart, screenHStart, screenW, screenH);
} else {
P.drawImage(newimages[2], screenWStart, screenHStart, screenW, screenH); //蒙版
P.globalAlpha = 1;
P.globalCompositeOperation = "source-in";
P.setTransform(e, a, n, i, _.translate.x + screenW / 2 + screenWStart, _.translate.y + screenW / 2 + screenHStart);
P.drawImage(newimages[1], -_.width / 2, -_.height / 2, _.width, _.height);
P.restore();
P.save();
P.setTransform(1, 0, 0, 1, 0, 0);
P.drawImage(newimages[3], screenWStart, screenHStart, screenW, screenH); //边框
}
P.restore(),
S = !1;
var g = _.translate.x;
var d = _.translate.y;
}
function n() {
S || (v(a), S = !0)
}
function i(t) { //tap
document.title = "tap";
}
function o(t) { //panstart panmove
_.translate = {
x: R + t.deltaX,
y: k + t.deltaY
},
a('yidonging')
}
function r() { //panend rotatesend
R = _.translate.x,
k = _.translate.y;
a()
}
function s(t) { //pinchstart pinchmove
"pinchstart" == t.type && (D = _.scale || 1);
//alert();
var e = D * t.scale;
_.scale = e;
a('yidonging')
}
function l(t) { //rotatestart rotatemove
"rotatestart" == t.type && (T = _.angle || 0),
_.angle = T + t.rotation,
a('yidonging');
}
//window.mainCtx = P;
var A = new Hammer(b);
A.add(new Hammer.Pan({
threshold: 15,
pointers: 1
})),
A.add(new Hammer.Rotate({
threshold: 0
})).recognizeWith(A.get("pan")),
A.add(new Hammer.Pinch({
threshold: 0
})).recognizeWith([A.get("pan"), A.get("rotate")]);
A.on("panstart panmove", o),
A.on("rotatestart rotatemove", l),
A.on("rotateend", r),
A.on("pinchstart pinchmove", s),
A.on("panend", r);
A.on("tap", i);
$('#b1').click(function () {//切换背景衣服
$('#design-area').css("background-image", "url(/images/tee.png)");
// $(".d1 .tx").show().siblings(".d1 .wy").hide();
});
$('#b2').click(function () {//切换背景衣服
$('#design-area').css("background-image", "url(/images/else/a4.png)");
// $(".d1 .wy").show().siblings(".d1 .tx").hide();
});
$('#b3').click(function () {//复位
loadedimages = 0;
newImg(arr);
});
function zoomFun(a) {
a.toggleClass("active");
if (a.is(".active")) {
$('.d2').css('transform', 'scale(1.4, 1.4)');
} else {
$('.d2').css('transform', 'scale(1, 1)');
}
}
var Imgs = $(".tpls").find("img"); //默认第一个蒙版
//imgTap.call(Imgs[0]);
arr = ['/images/tee1.jpg', '/images/333.jpg', '/images/10.png', '/images/11.png'];
newImg(arr);
//$(".tpls img").on("click", imgTap); //加蒙蔽事件
$(".btn-extend").on("click", function () {
$(".foot").toggleClass("hide") //收起展开按钮
});
$("#zoom").on("click", function () {//放大缩小按钮
zoomFun($(this));
});
//zoomFun();
$("#choose-btn").on("click", function () {//男女圆领选择
$(this).toggleClass("active"),
$(".choose-panel").toggleClass("active")
});
$("#options a").on("click", function (t) {
$(this).addClass("active").siblings().removeClass("active");
});
document.ontouchmove = function (t) {//防止iphone屏幕滑动
t.preventDefault()
};
$("#NextStep").on("click", function (t) {
convertCanvasToImage(C);
});
})
function convertCanvasToImage(canvas) {
var hc_image = new Image();
hc_image.src = canvas.toDataURL("image/png");
$('#imgBox').html(hc_image);
}
</script>