Abaixo está a introdução às funções da imagem que escrevi:
Você pode usar o mouse para arrastar e criar uma caixa de corte
Pode alterar o tamanho da caixa de colheita
Clique em OK para retornar aos dados da colheita
princípio
Existem duas maneiras de completar o corte:
1. Adicione a queda de arrasto para eventos de arrasto, etc. usando HTML5
2. Métodos tradicionais, usando eventos de mouse, mousedown, mousemove, etc.
Aqui adotamos o método 2.
Formação de áreas cortadas
Para cortar, devemos primeiro formar uma área de cultivo. A formação dessa área de cultivo pode ser associada à distância que o mouse se move. Quanto mais o mouse se move, maior a área da colheita. Como mostrado na figura abaixo:
Como mostrado na figura acima, a distância de movimento horizontal do mouse e a distância de movimento vertical juntos formam a largura e a altura da área de cultivo.
E como calcular a distância entre o movimento horizontal e vertical? Quando clicamos no mouse, podemos obter a posição de clique do mouse através event e, quando movemos o mouse, também podemos obter a posição do mouse durante event . Através de duas mudanças na posição do mouse, podemos obter a distância do movimento do mouse.
Os atributos para obter a posição do mouse são ClientX e Clienty
Formação de área sombreada
Em seguida, é desenhar a área das sombras. A parte da imagem cortada, exceto a área cortada, pertence à parte das sombras, e a área também não pode ser desenhada. Esta área é desenhada para permitir que o usuário veja a área cortada com mais clareza.
Dividi a área em quatro partes: superior, inferior, esquerda e direita, veja a distribuição da figura abaixo:
E daí se essa área for calculada? Neste momento, o valor de deslocamento do elemento DOM precisa ser usado. O valor de deslocamento esquerdo da área de recorte é subtraído do valor de deslocamento esquerdo da figura em si é a largura da sombra esquerda. O valor de deslocamento superior da área de recorte é subtraído do valor superior de deslocamento da figura é igual ao valor da altura da sombra superior. Como mostrado na figura abaixo:
Após obter os valores da sombra esquerda e da sombra superior, as propriedades das outras sombras podem ser calculadas através desses dois.
Existem duas maneiras de obter o valor de deslocamento da imagem
1. Desvantagens do uso dos valores de deslocamento e deslocamento se o elemento DOM tiver valores equivalentes à margem de borda, esses valores serão calculados em
2. As desvantagens da obtenção do atributo CSS do DOM são CSs predefinidos relacionados ao CSS predefinido se o topo esquerdo não for definido.
Ambos os métodos têm suas próprias desvantagens e são usadas de acordo com diferentes circunstâncias
Saindo dos limites
O cálculo da área da colheita é calculado pela distância móvel do mouse, de modo que a área da colheita ficará fora dos limites, e essa situação é dividida em dois tipos:
1. Atravesse os limites durante o processo de corte
2. Vá além do limite ao mover a área da colheita
Então, vamos falar sobre como evitar cruzar a linha.
Cortando sobre a linha
O que é transfronteiriço ao cortar? A área de arrasto do mouse excede a imagem e forma um fora dos limites, como mostrado na figura a seguir:
Para tais limites, é necessário julgar que o lado direito da área da colheita em relação ao lado esquerdo do navegador não pode exceder o lado direito da imagem e a posição no lado esquerdo do navegador; Ao mesmo tempo, a posição na parte inferior da área da colheita em relação à parte superior do navegador não pode exceder a posição na parte superior do navegador correspondente à parte superior da imagem. Ou para ilustrar:
Quando TX >= PX , force o valor de TX a um valor fixo.
O método de cálculo de TX e PX, assumindo que a área de cultivo seja oTailor , a área de figuras oPicture :
Tx = otailor.offsetWidth + otailor.offsetLeft; px = opicture.offsetWidth + opicture.offsetLeft;
Da mesma forma, o método acima pode ser usado para limitar o cruzamento do lado esquerdo, o cruzamento do lado superior e o cruzamento lateral inferior, para não entrar em detalhes.
Mova -se através dos limites
Mover-se fora dos limites significa que a área de cultivo foi formada, mas as ligações ocorrem ao mover a área de cultivo através do mouse. Esse entendimento é relativamente simples, por isso não vou apresentá -lo se desenhar figuras. Esse tipo de limite transfronteiriço é consistente com o limite transfronteiriço de arrastar e soltar DOM e é julgado pelo julgamento se o mouse vai além da área da imagem.
O princípio e o problema foram resolvidos e agora começaremos a concluir a função real.
Preparação
Antes de fazê -lo, faça um trabalho de preparação primeiro, afie a faca e pique a madeira sem atrasar o trabalho de cortar madeira.
Página da web preparação de layout
Os códigos de chave para o layout da página da web são os seguintes:
<img src = "./ imagens/img_2.jpg"> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div id = "box_1"> </div> <div id = "box_2"> </div id id = "box_3"> <//> </div> </div = "box_2"> </div id id = " id = "box_5"> </div> <div id = "box_6"> </div> <div id = "box_7"> </div> <div id = "box_8"> </div> <!-esquerda-> <div> </div> <!-top-> <!
Onde img_box representa a área de cultivo, outer representa a área das sombras, e a div em img_box é a borda da área de colheita
Os controles de estilo são os seguintes:
* {preenchimento: 0; margem: 0;} corpo {background: #454545; } .Main {Width: 500px; margem: 50px automático;}. IMG principal {largura: 500px; Posição: Absoluto; Esquerda: 450px; TOP: 50px;}. img_box {Overflow: Hidden; Posição: Absoluto; Top: 0px; Esquerda: 0px; Z-Index: 2;}. Externo {Overflow: Hidden; Antecedentes: #000; Opacidade: 0,4; Posição: Absoluto; Top: 0px; Esquerda: 0px; z-index: 0;}. Top;}. borda: 1px sólido #000; opacidade: 0,5;}. confront {width: 80px; Altura: 35px;}O efeito do layout é o seguinte:
Funções gerais
Depois de concluir o corte de imagem, através do princípio acima, podemos saber que precisamos obter um grande número de objetos de tag e os atributos CSS da tag etc. para que possamos escrever funções gerais para obter melhor esses valores. do seguinte modo:
Dom recebe a função
/ * Get */function $ (dom) {function getDom (dom) {var str = dom.charat (0); switch (str) {case '.' : this.ele = document.getElementsByclassName (dom.substring (1)) || null; quebrar; case '#': this.ele = document.getElementById (dom.substring (1)) || nulo; quebrar; padrão: if (document.getElementsByTagName (dom) .Length) {this.ele = document.getElementsByTagName (dom); } else if (document.getElementsByName (dom) .Length) {this.ele = document.getElementsByName (DOM); } else {this.ele = null; }} Retorne isso; }; getdom.prototype.get = function (num) {return this.ele [num] || this.ele; } getdom.prototype.insert = function (value, num) {this.ele [num] .innerhtml = value; } Retornar new getdom (dom);}Função de obtenção de atributos CSS
A aquisição de atributos CSS é dividida em dois tipos. Um é o IE, usando currentStyle ; O outro são outros navegadores convencionais, usando getComputedStyle , e os seguintes são versões compatíveis:
/* Css get*/function getcss (o, chave) {return o.currentStyle? o.CurrentStyle [key]: document.defaultView.getComputedStyle (O, false) [key]; };Função de atribuição
Ao escrever, muitas vezes encontro a atribuição dos estilos Dom. Por conveniência, escrevi especialmente uma função para a atribuição:
/** - Atribuir função - @param: object objet - @param: operação executada por opção - @parma: valor atribuir conteúdo*/função setassign (obj, opção, value) {switch (option) {case 'width': obj.style.width = value; quebrar; case 'altura': obj.style.Height = value; quebrar; case 'top': obj.style.top = value; quebrar; caso 'esquerda': obj.style.left = value; quebrar; caso 'posição': obj.style.position = value; quebrar; case 'cursor': obj.style.cursor = value; }}Os preparativos foram basicamente concluídos e agora a redação começou oficialmente.
Desenho completo da área de colheita clicando em eventos em movimento
Defina o monitoramento de eventos mousedown e mousemove para imagens, como segue:
// mouse clica na imagem para acionar o opicture.onmousedown = function (ev) {// Objeto de evento var oevent = ev || Window.Event; // posição inicial do mouse var tempx = oEvent.clientX; var tempy = oEvent.clienty; // Ajusta a posição da área da colheita otailor.style.left = oevent.clientx + 'px'; oTailor.style.top = oEvent.clienty + 'px'; // mouse move a área de recorte para desenhar o documento da área de sombra da área de cultivo.ONMOUSEMOVE = function (EV) {// Mouse move o objeto de evento var oevent = ev || Window.Event; // a posição atual do mouse menos a posição do mouse antes do mouse ser igual à distância do movimento do mouse var sleft = oEvent.clientX - tempx; var stop = oevent.clienty - tempy; // cortá o limite dos limites fora requer apenas limitar os lados direito e inferior se ((otailor.offsetleft+otailor.offsetWidth)> = (opicture.offsetleft+opicture.offsetWidthth)) {Sleft = Opicture.offleftleft+opicture.offSetwidthth) } if ((otailor.offsetTop+otailor.offsetHeight)> = (Opicture.offsetTop+opicture.offsetHeight)) {stop = opicture.offsettop+opicture.offsetHeight - otailor. } // Desenho de área de cultivo otailor.style.width = Sleft + 'px'; otailor.style.Height = Stop + 'PX'; // Área de cultivo Exibir otailor.style.display = 'bloco'; // Exibição da área de sombra para (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'bloco'; } // Shadow Area Desenho Shadow (Opicture, Otailor, Oshadow); // Adicione a borda da colheita Tailorborder (Odiv, Ohandle, Otailor); // bloqueia o evento padrão oEvent.PreventDefault (); }; // Libere o mouse para cancelar o documento do evento de movimento.onMouseUp = function (ev) {var oevent = ev || Window.Event; // mover evento cancelar document.onmousemove = null; // bloqueia o evento padrão oEvent.PreventDefault (); }; // bloqueia o evento padrão oEvent.PreventDefault ();}Desenho da área das sombras
/ *** @param: opicture picture dom 'esquerda'))) + 'px'); setassign (Oshadow [0], 'altura', parseint (getCSS (Opicture, 'esquerda'))) + 'px'); setassign (Oshadow [0], 'altura', parseint (getCSS (Opicture, 'altura') + 'px'); setassign (Oshadow [0], 'esquerda', parseint (getCSS (Opicture, 'esquerda')) + 'px') setassign (Oshadow [0], 'top', parseint (getCSS (Opicture, 'top') + 'px') // A área de sombra na direita é definida (oshshad, oshshad (') +' px ') //, a área de sombra da direita é definida. (Parseint (getCSS (Opicture, 'Width')) - Parseint (GetCSS (Otailor, 'Width')) - Parseint (GetCSS (Oshadow [0], 'Width)) +' Px '); setassign (Oshadow [2], 'esquerda', (parseint (getCSS (otailor, 'esquerda'))) + parseint (getcss (otailor, 'largura')) + 'px'); setassign (Oshadow [2], 'top', parseint (getCSS (Opicture, 'top')) + 'px'); // área de sombra superior setassign (oshadow [1], 'largura', parseint (getCSS (otailor, 'largura')) + 'px'); setassign (Oshadow [1], 'altura', (parseint (getCSS (otailor, 'top')) - parseint (getCSS (Opicture, 'top'))) + 'px'); setassign (Oshadow [1], 'esquerda', (parseint (getCSS (Opicture, 'esquerda'))) + parseint (getCSS (Oshadow [0], 'largura'))) + 'px'); setassign (Oshadow [1], 'top', parseint (getCSS (Opicture, 'top')) + 'px'); // a área de sombra inferior setassign (Oshadow [3], 'largura', parseint (getCSS (otailor, 'largura')) + 'px'); setassign (Oshadow [3], 'altura', (parseint (getCSS (Opicture, 'Height')) - parseint (getCSS (otailor, 'altura')) - parseint (getCSS (oshadow [1], 'altura')) + 'px'); setassign (Oshadow [3], 'esquerda', (parseint (getCSS (Opicture, 'esquerda')) + parseint (getcss (Oshadow [0], 'largura'))) + 'px'); setassign (Oshadow [3], 'top', (parseint (getCSS (otailor, 'top')) + parseint (getcss (otailor, 'altura')) + 'px');}Observe que, no uso real das páginas da Web, se não houver atributo esquerdo ou superior no CSS da figura no layout, o código acima gerará um erro. OffsetLeft e OffsetTop devem ser usados.
Adicione a borda da colheita
No diagrama de layout liberado, você pode ver a borda da colheita, e cada um dos quatro cantos e quatro lados tem uma pequena forma quadrada. A adição não é apenas distinguir entre a área de corte e a área sem corte, mas também para fornecer conveniência para a próxima etapa de adicionar a área de corte esticada. Vamos começar a escrever o código:
/*** Desenho da borda da colheita* @param: ODIV Todos os objetos de fronteira* @param: Ohandle pontilhada borda* @param: objeto de corte otailor*/função alfaiorborder (odiv, Ohandle, otailor) {// inicialize a borda para (var i = 0; i <odiv.Length; setassign (odiv [i], 'top', '0px'); setassign (odiv [i], 'esquerda', '0px'); setassign (odiv [i], 'esquerda', '0px'); setassign (odiv [i], 'largura', parseint (getcss (otailor, 'width')) + 'px'); setassign (odiv [i], 'altura', parseint (getCSS (otailor, 'altura') + 'px'); } /* Desenho de borda do tipo Dot* / // Desenho de borda do tipo DOT de quatro canhões para (var i = 0; i <4; i ++) {// desenho-de-amado Dot-Like setassign (Ohandle [i], 'posição', 'absoluto'); setassign (Ohandle [i], 'largura', '5px'); setassign (Ohandle [i], 'altura', '5px'); // 0 2 significa o dot esquerdo if (i % 2 == 0) {setassign (Ohandle [i], 'esquerda', '0px'); setassign (Ohandle [i], 'top', (i == 0? '0px': (parseint (getcss (otailor, 'altura') - 8) + 'px')); } else {// SetAssign do tipo direito direito (Ohandle [i], 'Esquerda', (parseint (getcss (otailor, 'width')) - 6) + 'px'); setassign (Ohandle [i], 'top', (i == 1? '0px': parseint (getcss (otailor, 'altura') - 8) + 'px'); }} // borda pontilhada de quatro lados para (var i = 4; i <ohandle.length; i ++) {setassign (Ohandle [i], 'posição', 'absoluto'); setassign (Ohandle [i], 'largura', '5px'); setassign (Ohandle [i], 'altura', '5px'); // 4 6 indica borda pontilhada superior e inferior if (i % 2 == 0) {setassign (Ohandle [i], 'esquerda', parseint (getcss (otailor, 'largura') / 2 + 'px'); setassign (Ohandle [i], 'top', (i == 4? '0px': (parseint (getcss (otailor, 'altura') - 8) + 'px')); } else {// DOT esquerdo e direito SetAssign (Ohandle [i], 'top', parseint (getcss (otailor, 'altura')) / 2 + 'px'); setassign (Ohandle [i], 'top', parseint (getcss (otailor, 'altura')) / 2 + 'px'); setassign (Ohandle [i], 'esquerda', (i == 5? '0px': parseint (getcss (otailor, 'width')) - 8) + 'px'); }}} No layout, os quatro primeiros divs com o nome da classe da área de recorte box_handle representam pontos em quatro cantos, e os últimos quatro representam pontos no meio da borda, todos distribuídos no sentido horário. Após a conclusão, o efeito é o seguinte:
Monitore áreas sombreadas
A área da colheita e a área de sombra são desenhadas. Agora adicione uma pequena função para cancelar a área da colheita quando o mouse clicar na área não cultivada (ou seja, na área das sombras).
// Defina o tempo para a configuração da área de sombra, quando a área da colheita desaparece, a área das sombras desaparece para (var i = 0; i <oshadow.length; i ++) {oshadow [i] .index = i; oshadow [i] .onMouDown = function () {otailor.style.display = 'nenhum'; otailor.style.width = '0px'; otailor.style.hegiht = '0px'; for (var i = 0; i <oshadow.length; i ++) {oshadow [i] .style.display = 'nenhum'; oshadow [i] .style.left = '0px'; oshadow [i] .style.top = '0px'; }}}Monitore a posição do movimento do mouse
Em seguida, adicione a função do alongamento da área de corte, o que dá efeitos diferentes quando o mouse se mover para a borda em forma de ponto na borda.
Adicionar efeito de exibição do mouse
// Configurações de monitoramento de fronteira apontadas Operações correspondentes otailor.onMousEMove = function (ev) {var otarget = oEvent.target; switch (otarget.id) {case 'box_1': // SetAssign superior esquerdo (otailor, 'cursor', 'nw-resize'); quebrar; case 'box_2': // SetAssign superior direito (otailor, 'cursor', 'ne-resize'); quebrar; case 'box_3': // abaixe o SetAssign esquerdo (Otailor, 'cursor', 'sw-resize'); quebrar; case 'box_4': // SetAssign direito inferior direito (OTAILOR, 'cursor', 'se-resize'); quebrar; case 'box_5': // Upper SetAssign (Otailor, 'cursor', 'n-resize'); quebrar; case 'box_6': // SetAssign esquerdo (otailor, 'cursor', 'w-resize'); quebrar; case 'box_7': // abaixe o setassign esquerdo (otailor, 'cursor', 's-resize'); quebrar; case 'box_8': // SetAssign direito (otailor, 'cursor', 's-resize'); quebrar; case 'box_8': // SetAssign direito (otailor, 'cursor', 'e-resize'); quebrar; Padrão: // A área de cultivo exibe um prompt móvel SetAssign (Otailor, 'Cursor', 'Move'); quebrar; }}Como existem muitas divs para monitorar, ele é adicionado pela delegação de eventos, o que é inconveniente para demonstração. Os alunos interessados podem testá -lo.
Adicione o efeito de alongamento
Código
// move o evento na área de cultivo otailor.onmousedown = function (ev) {// Objeto de evento do evento var oevent = ev || Window.Event; // obtenha status do cursor var ocur = getCss (otailor, 'cursor'); // Posição inicial do mouse var sTmpx = oEvent.clientX; var stmpy = oEvent.clienty; // Obtenha os atributos da área de cultivo para salvá -los com um objeto para facilitar a chamada de aveia. aveia. aveia. aveia. document.onMousEMove = function (ev) {// Move o objeto de evento var oevent = ev || Window.Event; // Posição atual do mouse menos a posição inicial do mouse é igual à distância do movimento do mouse var sleftt = oEvent.clientX - stmpx; var stopT = oEvent.clienty - stmpy; // indica a distância do movimento do mouse var otmpheight = ''; var otmptop = ''; var otmpwidth = ''; var otmpleft = ''; switch (OCUR) {case 'nw -resize': // Upper esquerdo otmpwidth = parseint (aveia) - sleftt; OtmphEight = parseint (OATTRS.Height) - StopT; OTMPLEFT = parseint (OATTRS.Left) + Sleftt; otmptop = parseint (aveia) + stopt; quebrar; Caso 'ne-resset': // superior direito // Nesse momento, a largura não pode subtrair a distância do movimento do mouse porque a distância do movimento nesse momento é um valor positivo otmpwidth = parseint (aveia. OtmphEight = parseint (OATTRS.Height) - StopT; // Nenhum valor esquerdo é necessário para mover o canto superior direito porque o som padrão é movido para a direita otmptop = parseint (aveia) + stopt; quebrar; case 'sw -resize': // inferior esquerda // o mesmo que a altura superior direita deve ser adicionada à distância de movimento do mouse otmpwidth = parseint (aveia. OtmphEight = parseint (OATTRS.Height) + StopT; OTMPLEFT = parseint (OATTRS.Left) + Sleftt; quebrar; case 'se-resset': // inferior direita // combinação do canto inferior esquerdo e superior direito ao mesmo tempo remova o OTMPWidth = parseint (aveia) + Sleftt; OtmphEight = parseint (OATTRS.Height) + StopT; quebrar; caso 'n -resize': // top otmpheight = parseInt (OATTRS.Height) - StopT; otmptop = parseint (aveia) + stopt; quebrar; case 'w -resize': // esquerda otmpwidth = parseint (OATTRS.Width) - Sleftt; OTMPLEFT = parseint (OATTRS.Left) + Sleftt; quebrar; case 's-resize': // sob otmpheight = parseInt (OATTRS.Height) + StopT; quebrar; caso 'e-resize': // Var otmpwidth = parseint (OATTRS.Width) + Sleftt; quebrar; Padrão: // Caso contrário, é a área de colheita em movimento (ovent, Otailor, Opicture, Oshadow); quebrar; } // puxe para o limite if (parseint (getcss (otailor, 'top')) <= opicture.offsettop) {otmpheight = parseint (getcss (opicture, 'altura')) - (opicture.offsetTop+parseint (getCSS (Opicture, 'altura')))-parseint (getCSS (otailor, 'top')))); OTMPTOP = OPICTUTE.OFFSETTOP; } else if (opicture.offsetTop+parseInt (getCSS (Opicture, 'altura')) <= (parseint (getCSS (otailor, 'top')))+parseint (getCSS (otailor, 'altura'))) {// puxe para o limite de peso Opicture.OffsetTop+Parseint (getCSS (Opicture, 'Height'))) - parseint (getCSS (Otailor, 'top')); } // puxe para a esquerda para o limite if ((parseint (getCSS (otailor, 'esquerda'))) <= opicture.offsetleft) {otmpwidth = parseint (getCSS (Opicture, 'width')) - (opicture.offsetleft+parseInt (getCSS (Opicture), 'Width')-parseint (getCSS (otailor, 'esquerda'))) otmpleft = opicture.offsetleft; } else if (parseInt (getCSS (otailor, 'esquerda'))+parseint (getCSS (otailor, 'esquerda'))> = (opicture.offsetleft+optture.offsetWidth)) {// puxe para a direita para o limite otmpWidththththththththth. parseint (getcss (otailor, 'esquerda')); } // Atribuir if (otmpwidth) {setassign (otailor, 'width', otmpwidth + 'px'); } if (otmpheight) {setassign (otailor, 'altura', otmpheight + 'px'); } if (otmpleft) {setassign (otailor, 'esquerda', otmpleft + 'px'); } if (otmptop) {setassign (otailor, 'top', otmptop + 'px'); } // Shadow Area Desenho Shadow (Opicture, Otailor, Oshadow); // Adicione a borda da colheita Tailorborder (Odiv, Ohandle, Otailor); }; // Ao liberar o mouse, observe que você cancela o documento do evento de movimento.onmouseup = function (ev) {// Objeto de evento do evento var oevent = ev || Window.Event; document.onMousEmove = null; oEvent.PreventDefault (); } oEvent.PreventDefault (); };Preste atenção ao cálculo da distância móvel ao se estender, especialmente quando se move para cima e para a esquerda. Preste atenção à alteração dos valores esquerda e superior da área cortada ao mesmo tempo, caso contrário, só aumentará para baixo e para a direita. Vamos falar sobre como calcular em detalhes:
princípio
Levando o mouse que se estende ao canto superior esquerdo como exemplo, a distância móvel do mouse é consistente com o que foi mencionado acima, mas neste momento, observe que o valor calculado é um número negativo. Portanto, ao calcular o valor agregado da área da colheita, o valor deve ser subtraído pela largura ou altura da área de cultivo original. Ao mesmo tempo, por mais que a largura seja aumentada, o valor de deslocamento esquerdo da área de cultivo deve ser subtraído. Caso contrário, o efeito exibido é que a área da colheita aumenta à direita, como mostrado na figura abaixo:
Na figura acima, a área verde é a área de cultivo após a largura e a altura são adicionadas quando esticadas. Se o ajuste do deslocamento não for realizado, a área amarela será a área de cultivo após o salto de deslocamento e as duas áreas sobrepostas são a área de corte original.
Isso está se estendendo no canto superior esquerdo, e o alongamento no canto inferior esquerdo é semelhante a outras coisas. Você pode colocá -lo na direção superior de acordo com a direção superior.
E a outra chave é que o alongamento e o cruzamento do limite foi mencionado acima, para não descrevê -lo mais.
Movimento de áreas cortadas
Agora, vamos falar sobre a última função, o movimento da área da colheita. Quando o mouse se move dentro da área da colheita, um evento de movimento será acionado. Neste momento, a área da colheita pode ser movida. O código é o seguinte:
/* Movimento da área da colheita*/Função de alavanca (EV, Otailor, Opicture, Oshadow) {var oevent = eV || Window.Event; var otmpx = oEvent.clientX - otailor.offsetleft; var otmpy = oEvent.clienty - otailor.offsettop; document.onMousEMove = function (ev) {var oevent = ev || Window.Event; oleft = oevent.clientx - otmpx; OTOP = oEvent.Clienty - OTMPY; if (oleft <opicture.offsetLeft) {oleft = opicture.offsetleft; } else if (oleft> (opicture.offsetleft + opicture.offsetWidth - otailor.offsetWidth)) {oleft = opicture.offsetleft + opicture.offsetWidth - otailor.offsetWidth; } if (otop <opicture.offsetTop) {otop = opicture.offSettop; } else if (otop> (opicture.offsetTop + opicture.offsetHeight - otailor.offsetHeight)) {otop = Opicture.offsettop + opicture.offsetHeight - otailor.offsetHeight; } otailor.style.left = (oleft)+ 'px'; otailor.style.top = (otop) + 'px'; Shadow (Opicture, Otailor, Oshadow); }}Obtenha a posição da colheita
A função do efeito de corte é basicamente concluída, portanto, você precisa obter a posição da colheita. Primeiro de tudo, você precisa saber quais propriedades você precisa obter. De acordo com a operação da biblioteca GD do PHP , você precisa conhecer as coordenadas do ponto de partida da colheita e a largura e a altura da colheita. Uso uma função para obter esses dados e encapsulá -los e retornar:
function getEle () {var opicture = $ ('img'). get (0); var otailor = $ ('. img_box'). get (0); OATTRS.LEFTX = (ParseInt (getCSS (otailor, 'esquerda'))) - Opicture.OffSetleft); aveia. aveia. aveia. Retornar aveia;}Há outro problema. Se as imagens na página da web forem compactadas usando CSS, a posição obtida aqui será diferente do tamanho da colheita do que você imaginou. O alcance da imagem cortada pode se tornar maior (a imagem original é maior) ou pode se tornar menor (a imagem original é menor).
Se o tamanho da imagem original puder ser obtido, você poderá cortar de acordo com a proporção da imagem compactada e a imagem original, para que a imagem de corte correta possa ser obtida.
OK, uma função simples de corte de imagens é concluída e você pode usar o Ajax para passar para o plano de fundo para processamento.
O conteúdo deste artigo termina aqui. Se você tiver alguma dúvida, deixe uma mensagem para discutir. Espero que este artigo seja útil para todos para aprender JavaScript.