स्क्रीन रेस और कैनवास आकार से स्वतंत्र पनिंग सीमा निर्धारित कैनवास

मैंने एचटीएमएल 5 कैनवास में एक एनीमेशन के लिए एक पैनिंग कार्यक्षमता लागू की है। यह शायद मैंने जो कुछ बनाया है, उसका सबसे घृणास्पद कार्यान्वयन है, या ऐसा लगता है कि यह हाहा है, लेकिन यह काम करता है और यह अभी के लिए काफी अच्छा है।

So I set these variables - I'll exclude the Y axis logic, and any save & restores for simplicity.

var translationX = 0; //This is where to start the clipping region

यह मेरा चित्र तर्क है। कैनवास छवि को खींचा जाना है, बीकनवास छवि पर रखने के लिए 'व्यूपोर्ट' है। जब मैं इसमें ज़ूम नहीं करता हूं तो बस पूरे कैनवास छवि को प्रदर्शित करता है। यहां के रूप में सभी काम करता है।

function drawBuffer(){

    //If zoomed in I set the clipping region dimensions to half,  
      //having the effect of scaling by 2.

    if(stateManager.getZoomState() == "zoomIn")
        bContext.drawImage(canvas,translationX,translationY,
                           bCanvas.width*0.5,bCanvas.height*0.5,
                           0,0,
                           bCanvas.width,bCanvas.height);


    //Otherwise just draw the image to a scale of 1
    else
        bContext.drawImage(canvas,0,0,bCanvas.width,bCanvas.height);
}

X अक्ष में कैनवास में क्लिपिंग क्षेत्र को स्थानांतरित करने के लिए यह तर्क है, और जहां समस्या निहित है - उस स्थिति में जो कहती है कि अनुवाद x बढ़ाने के लिए कहां से रोकें।

 function moveClippingRegion(){

    if(state is set to zoomed in){

        if(Right arrow key is pressed){

         //This condition admittedly is just the result of hacking away, but it works
         //in the sense that I stop incrementing translationX when 
          //at the edge of the canvas

            if(translationX>= (bCanvas.width -canvas.width) - translationX - 64){
               //The -64 literal is definitely a hacking attempt, 
              //but without the clipping region increments two times more than 
              //it should, thus going off the canvas.

            }
            else
                translationX += 16;

        }
 }

ठीक है तो यह सब काम करता है जब खिड़की का आकार बदल नहीं गया है, इसलिए मैं जो कुछ ढूंढ रहा हूं वह कुछ दिशा है कि बीसीएनवासों के आकार के साथ उस तराजू में किस स्थिति को रखना है।

किसी भी महत्व के मामले में आकार बदलने का कार्य यहां दिया गया है:

     function onResize(){

    bCanvas.width = window.innerWidth *    0.60952380952380952380952380952381;      

    bCanvas.height = window.innerHeight * 0.83116883116883116883116883116883;
    drawBuffer();
}

ड्राइंग कैनवास के आयाम 1024 x 768 हैं, इसलिए उन बदसूरत अक्षर केवल bCanvas को कैनवास के समान आयाम बनाते हैं।

यह केवल मेरे स्क्रीन रिज़ॉल्यूशन पर काम करता है, और जब विंडो का आकार बदल नहीं लिया गया है। मैं अपने चुटकुले अंत में संकल्प के स्वतंत्र/खिड़की के आकार के बाद काम करने की कोशिश कर रहा हूं।

आखिर में यहां विभिन्न छवियों पर होने वाली समस्या को चित्रित करने में मदद करने के लिए एक छवि है/खिड़की के आकार बदलने के बाद, यदि विंडो को वास्तव में छोटे आकार में बदल दिया गया है, तो क्लिपिंग क्षेत्र भी हिल नहीं जाता है, जिसे लॉग इन के साथ उम्मीद की जा सकती है moveClippingRegion फ़ंक्शन में if स्टेटमेंट .:

यहां छवि विवरण दर्ज करें

इसे पहले से पढ़ने के लिए धन्यवाद, किसी भी मदद की सराहना की जाएगी!

0

2 उत्तर

कैनवास बाहर खींचने से आपकी मदद मिल सकती है।

आपको नीचे दिए गए जैसा समाधान देना चाहिए। ज़ूम दर के रूप में देखकर x2 (.5) आधा ज़ूम कैनवास है और ज़ूम कैनवास/2 से कैनवास चौड़ाई से बायीं स्थिति को घटाएं। या वीजा बनाम (सिर स्क्रैचर: पी)

var StepRate;//<- your step increment when moving.
if(translationX >= (canvas.width/2) - (((zoomCanvas.width - canvas.width)/2) + StepRate)){}
else
    translationX += StepRate;
0
जोड़ा
सही समाधान!
जोड़ा लेखक Lee Brindley, स्रोत

I was making a paint type web app when I ran into something similar. You'll need to add/subtract the offset top/bottom and multiply/divide the offset height/width of your elements. There's some strange math involved, and unfortunately will take a lot of time for you to solve. You'll have to just play with numbers until you get it right. Make sure you use offsets, which will give you the actual position instead of what's set in CSS or JS. Set values are not real numbers for calculating element sizes & positions. I'm not sure what to tell you on zoom though, because I added a zoom feature so I could manipulate the sizes. Here's a snippet from my app which will show at least a starting point:

$('#pg'+id).mousemove(function(e) {
   //x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
    if (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);

    $('#debug').html(x+', '+y);//constantly update (x,y) position in a fixed div during debugging
});
0
जोड़ा