小编Dee*_*S A的帖子

在html5画布上拖动和调整图像大小

我正在构建一个HTML5画布图像编辑器.将图像上传到画布后,我需要Dragg并在画布上调整大小.我设法上传了一张图片并将其拖放到画布上.但我需要在画布上使其可调整大小.提前致谢.

var Img = new Image();
Img.src = file;
Img.onload = function () {
  context.drawImage(Img, 50, 0, 200, 200); 
}
mouseMove = function (event){
if (down) 
{
 context.clearRect(0,0,800,500);
 context.translate(0, -50); 
 context.drawImage(Img, (event.clientX - offsetX),
 (event.clientY - offsetY), 200, 200);
 context.translate(0, 50);
}
}
mouseUp = function () {
  down = false;
}
mouseDown = function () {
  down = true;
}
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove',mouseMove, false);

Run Code Online (Sandbox Code Playgroud)

我尝试使用kinetics,但它不适合用帆布.

javascript html5-canvas

Dee*_*S A

2013 10-07

11
推荐指数

1
解决办法

4万
查看次数

如何使用谷歌地图api和JavaScript查找附近的医院

var MapApiApplication = {
   myCurrentPosition : "",
   mapOptions : "",
   marker : "",
   initialize : function(){
      MapApiApplication.myCurrentPosition = new google.maps.LatLng(10.112293000000000000, 76.352684500000010000);
      MapApiApplication.mapOptions = {
        zoom: 13,
        center: MapApiApplication.myCurrentPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      MapApiApplication.map = new google.maps.Map(document.getElementById('map-canvas'), MapApiApplication.mapOptions);
      MapApiApplication.marker = new google.maps.Marker({
         position: MapApiApplication.myCurrentPosition,
         map: MapApiApplication.map,
         title: 'Here You are'
      });
   }, 
};

Run Code Online (Sandbox Code Playgroud)

我有当前位置的经纬度.如何只使用javascript和google maps api找到附近的医院位置.

javascript html5 google-maps-api-3

Dee*_*S A

lucky-day

6
推荐指数

2
解决办法

2万
查看次数

使用鼠标在画布中旋转图像

在我的代码中,我将图像加载到画布中.然后我需要调整大小,旋转和拖动它.我设法实现了拖动和调整大小.

如何在此代码上使用鼠标实现旋转(沿图像中心).

我的HTML页面:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:10px;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;


    var pi2=Math.PI*2;
    var resizerRadius=8;
    var rr=resizerRadius*resizerRadius;
    var draggingResizer={x:0,y:0};
    var imageX=50;
    var imageY=50;
    var imageWidth,imageHeight,imageRight,imageBottom;
    var draggingImage=false;
    var startX;
    var startY;



    var img=new Image();
    img.onload=function(){
        imageWidth=img.width;
        imageHeight=img.height;
        imageRight=imageX+imageWidth;
        imageBottom=imageY+imageHeight
        draw(true,false);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";


    function draw(withAnchors,withBorders){ …

Run Code Online (Sandbox Code Playgroud)

javascript rotation html5-canvas

Dee*_*S A

2016 06-24

6
推荐指数

1
解决办法

1万
查看次数