拖动将图像移动到圆形内（圆形移动） [英] Drag Move an Image inside a Circle (circular movement)

问题描述

我在画布上画了一个圆圈，并在边框附近放了一个图片。现在我完全不知道。我想拖动图像在圆周围，但箭头图像的顶部应该总是在边框上。
例如：我在九点钟将箭头从顶部拖到左边。现在，箭头图片需要旋转90度。

http://jsfiddle.net/L5twk3ak/1/

  canvas = document.getElementById（'test'）; var context = canvas.getContext（2d）; var points = []; var radius = 55; imageBG = new Image（）; imageBG.onload = function（）{context.drawImage（imageBG，148，100，15，15） ;}; imageBG.src ='https://www.nanamee.com/upload/images/5945/5945_p.jpg';for(var degree = 0; degree< 360; degree ++）{var radians = degree * Math .PI / 179; var x = 150 + radius * Math.cos（radians）; var y = 150 + radius * Math.sin（radians）; points.push（{x：x，y：y}）;} context.beginPath（）; context.moveTo（points [0] .x + 4，points [0] .y + 4）for（var i = 1 ; i< points.length; i ++）{var pt = points [i]; context.lineTo（pt.x + 4，pt.y + 4）;} context.strokeStyle =black; context.lineWidth = 1; context.stroke（）; context.closePath（）;  

 < canvas id = < / canvas>  

测试width =400height =400>您的浏览器不支持HTML5 canvas标签。 >

解决方案

您需要：

• 根据需要绘制你的弧（除非你有更好的计划 lineTo（））


• 计算鼠标位置


• 根据鼠标位置和弧形中心计算结果度。
li>

• 创建绘制函数（一个用于Arc，另一个用于在翻译canvas上下文后绘制图像）。

_{我会不会显示如何实施点击+拖动，因为非常简单 ：如果同时注册了CLICK + MOUSEMOVE，则只需应用您的绘制函数。}

这里是有趣的计算部分：

  var canvas = document .getElementById（'test'）; // store in variable！var context = canvas.getContext（2d）; var circle = {rad：55，x：100，y：100}; // object for ease of usevar img = {src：'// placehold.it/13x13/000'，x：0，y：0，w：13，h：13}; var arrowImg; // Store for later Image referencefunction drawArc（）{context.beginPath（）; context.arc（circle.x，circle.y，circle.rad，0，Math.PI * 2，true）; context.strokeStyle =＃000; context.lineWidth = 1; context.stroke（）; context.closePath（）;} function drawImg（deg）{context.save（）; // save before we messing ctx translations context.translate（circle.y，circle.x）; //暂时将ctx //转换为Arc中心坐标。 context.rotate（deg * Math.PI / 180）; //我们需要Radians so deg * Math.PI / 180 context.drawImage（arrowImg，circle.rad-img.w，-img.h / 2）; context.restore（）; // restore to default} function calcDeg（e）{//从鼠标位置到圆弧中心获取度数var mPos = {x：e.pageX-canvas.offsetLeft-circle.x，y：e.pageY-canvas.offsetTop -circle.y}; var getAtan = Math.atan2（mPos.y，mPos.x）; return getAtan * 180 / Math.PI;} drawArc（）; // Draw the ARcarrowImg = new Image（）; // Create Image ObjarrowImg.onload = function（）{drawImg（-90）}; // onload draw the ImagearrowImg.src = img.src; canvas.addEventListener（mousemove，function（evt）{canvas.width = canvas.width; //清除画布drawArc（）; //绘制Arc drawImg （evt））; //以计算的度绘制图像}，false）;  

  canvas {background：#eee;}  

 < canvas id =testwidth =400height =400>您的浏览器不支持HTML5 canvas标签。< / canvas>  

_{不清楚？ Goog，而不是问}

I drawn a circle in canvas and put an image near the border. Now I have absolutely no idea..I want to drag the image around the circle but the top of the arrow image should always be on the border. For Example: I drag the arrow from the top to the left at nine o'clock. Now the arrow image needs to be rotated 90 degrees.

http://jsfiddle.net/L5twk3ak/1/

canvas = document.getElementById('test');
var context = canvas.getContext("2d");
var points = [];
var radius = 55;

imageBG = new Image();
imageBG.onload = function() {context.drawImage(imageBG, 148, 100, 15, 15);};
imageBG.src = 'https://www.nanamee.com/upload/images/5945/5945_p.jpg';

for(var degree = 0; degree < 360; degree++)
{
	var radians = degree * Math.PI / 179;
	var x = 150 + radius * Math.cos(radians);
	var y = 150 + radius * Math.sin(radians);
	points.push({x : x, y : y});
}

context.beginPath();
context.moveTo(points[0].x + 4, points[0].y + 4)

for(var i = 1; i < points.length; i++)
{
	var pt = points[i];
			
	context.lineTo(pt.x + 4, pt.y + 4);
}

context.strokeStyle = "black";
context.lineWidth = 1;
context.stroke();	
context.closePath();

<canvas id="test" width="400" height="400">Your browser does not support the HTML5 canvas tag.</canvas>

解决方案

You need to :

• Draw your Arc as we're supposed to (unless you have better plans with lineTo() )
• calculate the mouse position inside the canvas - on mousemove.
• calculate the resultant degree depending on Mouse Position vs. the Arc center.
• cache your image for reuse
• create draw functions (one for the Arc, the other for drawing the Image after translating the canvas context). That way on (click+drag) mousemove you can simply reuse them to draw your objects into Canvas.

_{I'll not show you how to implement the click+drag cause it's pretty trivial: you simply need to apply your draw functions if both CLICK+MOUSEMOVE are registered.}

Here's the interesting calculations part:

var canvas = document.getElementById('test'); // Store in variable!
var context = canvas.getContext("2d");
var circle = {rad: 55, x:100, y:100};         // Object for ease of use
var img = {src:'//placehold.it/13x13/000', x:0 ,y:0, w:13, h:13};
var arrowImg; // Store for later Image reference

function drawArc(){
    context.beginPath();
    context.arc(circle.x, circle.y, circle.rad, 0, Math.PI*2, true);
    context.strokeStyle = "#000";
    context.lineWidth = 1;
    context.stroke();	
    context.closePath();
}
function drawImg( deg ){
    context.save(); // save before we mess with ctx translations
    context.translate(circle.y, circle.x); // temporarily translate the ctx 
                                           // to the Arc center coordinates.
    context.rotate(deg*Math.PI/180); // we need Radians so deg*Math.PI/180
    context.drawImage(arrowImg, circle.rad-img.w, -img.h/2);
    context.restore(); // restore to default
}
function calcDeg(e){ // Retrieve degree from mouse position vs. arc center
    var mPos = {
      x : e.pageX-canvas.offsetLeft-circle.x,
      y : e.pageY-canvas.offsetTop-circle.y
    }; 
    var getAtan = Math.atan2(mPos.y, mPos.x);    
    return getAtan*180/Math.PI;
}

drawArc();                                    // Draw the ARc
arrowImg = new Image();                       // Create Image Obj
arrowImg.onload = function(){ drawImg(-90) }; // onload draw the Image
arrowImg.src = img.src;

canvas.addEventListener("mousemove", function(evt){
    canvas.width = canvas.width; // clear the canvas
    drawArc();                   // Draw Arc
    drawImg( calcDeg(evt) );     // Draw Image at the calculated degree
}, false);

canvas{background:#eee;}

<canvas id="test" width="400" height="400">Your browser does not support the HTML5 canvas tag.</canvas>

_{Not clear? Goog, than ask}

这篇关于拖动将图像移动到圆形内（圆形移动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！