Click here to Skip to main content
15,028,757 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Ok i have been trying this all morning but to no avail.
I am having a slider element whose slide area is about 420px in height.I am having a canvas element whose height is 400px and width is 215 px as below:
HTML
<div class="maincontent"><!--maincontent-->


    <div class="table"><!--table-->

        <div class=""></div><!--gr1highlight-->


        <div id="distanceSliderContainer">
            <div id="distanceSliderHolderArea">
                <div id="distanceSliderDrag">
                    <div id="sliderBar" class="distanceSlider-bar"> </div>
                    <div id="slidertext" class="distanceSlider-text">24</div>
                </div>
            </div>
        </div>

        <canvas id="myCanvas" class="canvas-bg"></canvas><!--canvas-bg-->



        <div id="amplitudeSliderContainer">
            <div id="amplitudeSliderHolderArea">
                <div id="amplitudeSliderDrag">
                    <div id="amplitudeSliderbar" class="amplitudeSlider-bar"> </div>
                    <div id="amplitudeSlidertext" class="amplitudeSlider-text">24</div>
                </div>
            </div>
        </div>


    </div><!--table-->




</div><!--maincontent-->



Now what i want to do is map canvas's one pixel to pixel returned by css attribute top,so that i can dynamically draw a line from a standalone point to the point as the slider slides,till now i am able to get the line but its lagging behind the slider. So my question is how can i map the one pixel of canvas to one pixel returned by slider's top attribute so that the line is drawn consistently with the slider,below is my code for drawing line:

JavaScript
var globalObject;
function CanvasLinePainter(){
    globalObject=this;
    this.y=136
    this.rotate=0.03;
    this.previousOffsetTop=356;
    this.canvas = document.getElementById('myCanvas');
    this.context = this.canvas.getContext('2d');
    this.context.beginPath();
    this.context.moveTo(75,136);
    this.context.lineTo(220,136) ;
    this.context.lineWidth = 1.5;
    this.offsetPixelCount=0;
    this.tempFifteen=0;
    // set line color
    this.context.strokeStyle = '#00FF00';
    this.context.stroke();

   $("#clickMe").on("click",this.getCordinates);

}
CanvasLinePainter.prototype.drawLineForDistance=function(offsetTop){


    this.context.beginPath();
    if(offsetTop){

        if(offsetTop<this.previousOffsetTop){

            this.offsetPixelCount++;
            console.log("current offsetTop:"+offsetTop);
            console.log("previous offsetTop:"+this.previousOffsetTop);

            this.previousOffsetTop=offsetTop;


            console.log("new previous offsetTop"+this.previousOffsetTop);

              if(this.offsetPixelCount==3){

                this.offsetPixelCount=0;
                if(offsetTop){
                    this.context.canvas.width =globalObject.context.canvas.width;
                    this.context.rotate(0.03);
                    this.context.moveTo(75,this.y--)//(85,135);

                    console.log("new this.y--->"+this.y);
                    this.context.lineTo(220,136)//(220,125) ;
                }
              }




        }

    }
    this.context.lineWidth = 1.5;
    // set line color
    globalObject.context.strokeStyle = '#00FF00';
    globalObject.context.stroke();





}


From my calculation i am able to get that if slider moves three pixels up i have to decrement the y co-ordinate by single pixel so the line shifts up,but the problem is that if i move the slider fast the line lags behind. The above line drawing code gets called when my slider moves.

P.S. i have used draggable as my slider and not jquery ui's slider element
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900