通常在我们在需要对某地或者某物不同时期的情况对比时，多采用图片并列或者图片轮播的形式，但是这样的形式并不直接，且缺乏交互性。为了解决这个问题，我们可以采用交互式的图片控件来实现。其主要思想就是将两张前后图重合，用户可以自由选取图片的显示部分，效果如下：
 
 
为了实现这个效果，我们将使用resize属性，使其可以在横向变形。为了防止图片拉扯变形，我们用一层div将一张图包裹，置于另一张图的上层。这是仅需调整div框的长度就可以实现图片显示区域的变化。
 
    DOM结构如下：
 
    <div class="slider">

      <img src="pic.jpg" alt="">

      <div>

        <img src="pic.jpg" alt="">

      </div>

    </div>
 
同时为了更加明显提示图片是交互式，可调整的，我们引入一个滑动条来实现这种调整。
 
<input type="range">
 
CSS样式如下：
 
.slider{

  position: relative;

  display: inline-block;

  width: 1280px;

  height:720px;

}

.slider > div{

  position: absolute;

  top:0;left: 0;bottom: 0;

  width: 50%;

  overflow: hidden;

  resize: horizontal;

}

.slider > img{

  display: block;

  filter: sepia(1) saturate(.6);/*设置滤镜，模拟对比图片*/

}

.slider input{

  position: absolute;

  left: 0;

  bottom: 10px;

  width: 100%;

  margin: 0;

}
 
但是这样的DOM结构会使得每次我们添加交互对比图的过程极为繁琐，我们应该将嵌套的结构整合到一起，利用js来动态添加控件：
 
    新DOM结构：
 
    <div class="slider">

      <img src="pic.jpg" alt="">

      <img src="pic.jpg" alt="">

    </div>
 
 
 
js代码如下：
 
$(".slider").each(function(){

  var img = $(this).find('img');

  var img1 = img.eq(0);

  var img2 = img.eq(1);

  var div = document.createElement('div');

  $(div).append(img1);

  var input = document.createElement('input');

  input.type = 'range';

  input.oninput=function(){

    div.style.width = this.value+"%";

  }

  $(this).html("");

  $(this).append(img2);

  $(this).append(div);

  $(this).append(input);

});
 
此时我们的交互式控件就可以使用了。

 仅供参考，数据都是网上搜的不一定准确，图片如有侵权，立刻删除
 
交互式多媒体（interactive multimedia）是在传统媒体的基础上加入了交互功能，通过交互行为并以多种感官来呈现信息，受众不仅可以看得到、听得到还可以触摸到、感觉到、闻到而且还可以与之相互作用，它带给人们全新的体验是一种崭新的媒介形式。
 
相关技术：触屏技术、多媒体技术、虚拟现实技术等
 
 
 
一、触摸屏
 
触摸屏作为一种最新的电脑输入设备，它是简单、方便、自然的一种人机交互方式。它赋予了多媒体以崭新的面貌，是极富吸引力的全新多媒体交互设备。
 
触摸屏具有方便直观、图像清晰、坚固耐用和节省空间等优点，使用者只要用手轻轻地碰计算机显示屏上的图符或文字就能实现对主机的操作和查询，摆脱了键盘和鼠标操作，从而大大提高了计算机的可操作性和安全性，使人机交互更为直接。
 
根据传感器的类型，触摸屏大致被分为红外线式、电阻式、表面声波式和电容式触摸屏四种。
 
二、交互式电子白板
 
交互式电子白板可以与电脑进行信息通讯，将电子白板连接到PC，并利用投影机将PC上的内容投影到电子白板屏幕上，此时的电子白板就相当于一个面积特别大的手写板，可以在上面任意书写、绘画并即时的在PC上显示，文件保存为图形文件。此功能一般需要一个专用的白板软件支持。PC可以连接打印机、数字展台等设备，实现即时录制视频展示、实物展示、打印等。如果通过特定的应用程序如MICROSOFT的NETMEETING，交互式电子白板就可以通过网络与其他办公室、会议室进行交流，实现网络会议。
 
交互式电子白板按照技术原理主要有四种，四种技术的发展过程是：
 
压感电子白板→电磁电子白板→红外电子白板→光学电子白板。
 
随着技术进步，压感电子白板由于定位不准，使用需要力度，使用者使用不方便己完全淘汰。电磁电子白板改善了压感技术的定位不准确的问题，一度在市场上很受欢迎，但是由于不能实现手动触控，需要专用笔，耗材使用大，随着新技术的发展，电磁电子白板也在逐渐被新技术淘汰和替代。
 
下面主要介绍市场上的两种主流技术的电子白板，红外电子白板和光学电子白板。
 
红外白板的原理是通过白板周围一圈的红外框来达到定位效果。
 
 
 
 
红外框从X轴和Y轴发出信号，另外一边接收。如果被手指遮挡，则会感应到手指的触控位置，从而达到定位的效果。
 
截至2013年，已经存在扇形发射信号的红外电子白板，这样可以避免由于一两个红外灯坏之后所产生的接收失灵等问题。
 
红外电子白板的优点是直接手写或者任意物体都能替代笔的效果。操作感觉有点类似于IPAD的操作感觉。一般在幼教，商用等领域应用广泛。
 
缺点：不能提供板书的精确书写效果，手写的时候必须一笔一划，同时手腕或者其他物体进入红外框范围则会造成误操作。同时红外电子白板会受到屏前强光干扰。
 
光学电子白板应用的是最新的光学影像感应技术，继承了红外电子白板的优点，同时修正了缺点，不受屏前强光干扰，触摸精度高，书写流畅，可以跟平时的书写习惯完全一致，不会产生任何延迟。广泛应用在学校、培训、会议领域。
 
光学电子白板是一种先进的教育或会议辅助人机交互设备，它可以配合投影机、电脑等工具，实现无尘书写、随意书写、远程交流等功能。
 
 
 
 
发展趋势
 
我们通过电子白板市场的发展历史和现实情况可以预见，中国将成为未来发展最快和最大的市场，电子白板产品将仍然主要被应用于教育行业，服务于教学，这是我们了解这个行业的基础。截至2013年，因为这个市场的飞速发展，在利益的驱动下，在2009-2010年这一年多的时间内，国内涌现出了大量的电子白板产品，类似于当初MP3，手机行业的生产状况，产品价格急剧下降，行业平均品质也急剧下降，谈不上专业性的服务，但电子白板将长期应用于教育行业，并且对学科专业性及服务要求特别高，这样注定一些不理解教育行业的厂家将逐渐消失，只有真正理解和扎根教育行业的电子白板厂家，才能取得市场的认可和长远发展。
 
虚拟现实
虚拟现实技术(英文名称：Virtual Reality，缩写为VR)，又称灵境技术，是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体，其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展，各行各业对VR技术的需求日益旺盛。VR技术也取得了巨大进步，并逐步成为一个新的科学技术领域。
 
 
虚拟现实的关键技术主要包括：
 
1、动态环境建模技术
 
2、实时三维图形生成技术
 
3、立体显示和传感器技术
 
4、应用系统开发工具
 
5、系统集成技术
 
近年来，由于虚拟现实技术在影视业的广泛应用，以虚拟现实技术为主而建立的第一现场9DVR体验馆得以实虚拟现实现。第一现场9DVR体验馆自建成以来，在影视娱乐市场中的影响力非常大，此体验馆可以让观影者体会到置身于真实场景之中的感觉，让体验者沉浸在影片所创造的虚拟环境之中。同时，随着虚拟现实技术的不断创新，此技术在游戏领域也得到了快速发展。虚拟现实技术是利用电脑产生的三维虚拟空间，而三维游戏刚好是建立在此技术之上的，三维游戏几乎包含了虚拟现实的全部技术，使得游戏在保持实时性和交互性的同时，也大幅提升了游戏的真实感。
 
 
 
虚拟现实技术已经成为促进教育发展的一种新型教育手段。传统的教育只是一味的给学生灌输知识，而现在利用虚拟现实技术可以帮助学生打造生动、逼真的学习环境，使学生通过真实感受来增强记忆，相比于被动性灌输，利用虚拟现实技术来进行自主学习更容易让学生接受，这种方式更容易激发学生的学习兴趣。此外，各大院校利用虚拟现实技术还建立了与学科相关的虚拟实验室来帮助学生更好的学习。
 
 
 
 
交互式投影仪
新闻：“赛未来”是由国术科技和以色列EyeClick公司深度合作研发的、目前全球领先的互动投影游戏设备，分为地面互动投影系统、桌面互动投影系统、墙面互动投影系统和体感互动投影系统。科博会上国术科技展示了“赛未来”地面和桌面交互投影仪两款产品。“赛未来”的神奇之处在于，能将生活中原本普通的地面、桌面秒变成犹如放大版Ipad的炫酷屏幕，观众会沉浸其中，主动地用手、脚和身体姿势来参与游戏。
 
 
 
 
据介绍，“赛未来”有超过200款精心打磨的高品质的游戏内容可供选择，能满足不同年龄段、不同用户的科普教育需求，让孩子们抛开手机屏幕，尽情地健康地“动”起来，从而锻炼和提高孩子的反应能力、协调能力、思维能力和沟通能力，寓教于乐。
 
一些桌面可交互投影仪，也相继出现在我们的视野中，目前市场上有交互投影技术的厂商有奥图码，明基，爱普生，雅图等。其中应为最为成熟时间最早的是爱普生。
 
 
但是交互式投影仪，会受到液晶面板价格的影响，受到互动一体机的价格影响。
 
主要的应用领域也是教育领域，一台便可取代原本的多个设备，不仅节省投入成本，而且方便教学使用。
 
 
 
简单实现：一种交互式投影系统的原理图
 
 
是基于普通摄像头和投影仪，配合红外LED书写笔以及所开发的高精度标定和LED光笔跟踪算法，使用户可以在投影屏上操作电脑，并实现书写、绘图等各种功能的设备。
 
可能涉及的技术是红外技术及摄像头图像数据采集及分析。
 
 
 
 
 
多屏互动
 
多屏互动指的是运用闪联协议、Miracast协议等，通过WIFI网络连接，在不同多媒体终端上（如常见基于Ios,Android,Symbian等不同操作系统上的不同智能终端设备，如手机，PAD，TV等之间），可进行多媒体（音频，视频，图片）内容的传输，解析，展示，控制等一系列操作，可以在不同平台设备上同时共享展示内容，可以实现双向操作，进行对书写、批注、文稿演示等，丰富用户的多媒体生活。简单的说，就是几种设备的屏幕，通过专门的连接设备就可以互相连接转换。比如手机上的电影可以在电视上播放，平板上的图片可以在电视上分享，电脑的内容可以投影到电视上，是一种时下正在悄然兴起的技术。
 
 
 
基于协议：
 
一、DLNA（由索尼、英特尔、微软等发起成立、旨在解决个人PC，消费电器，移动设备在内的无线网络和有线网络的互联互通技术）
 
二、WIDI（Intel WirelessDisplay 全称为无线高清技术，它是通过WiFi信号来实现电脑和显示设备的无线连接。在英特尔发布Capella移动平台之后，WiDi技术就已经能够运用在相关产品之中。）
 
三、AIRPLAY（由美国苹果公司推出的无线技术）
 
四、闪联（联想、TCL、康佳、海信、长城联合发起的协议标准，支持各种3C设备智能互联、资源共享和协同服务，实现“3C设备+网络运营+内容/服务”的全新网络架构。）
 
五、Miracast Wi-Fi Alliance于2012年9月19日宣布启动的Wi-Fi CERTIFIED Miracast™认证项目。Miracast设备提供简化发现和设置，用户可以迅速在设备间传输视频。

Photoshop中的自由变换工具，可以用来调整图片的几何形状，可以平移、旋转、缩放和斜切等，配合shift、ctrl和alt三键，使用起来十分灵活。一些成熟的在线PS，如Pixlr Editor，主要基于Flash平台技术实现，而目前，也出现了一些基于HTML5 Canvas实现的在线图像编辑工具，如CloudCanvas，它们都提供了自由变换工具。本人曾在自己的x项目中基于Flash平台技术实现了简单的图像自由几何变换功能，如图1所示。如今，本人对HTML5 Canvas和WebGL兴趣浓厚，于是想如何在Canvas上实现相似的功能。凭着项目得来的经验，经过一番研究，最终在无插件模式下，创建了如图2所示的Demo。
 
 

 
 
Demo在线演示，特来补上，建议使用Chrome浏览器打开（2014.10.23）。
 

 
 

 
 
图1
 

 
 
(a)
 
  
 
(b)                                                                                                    (c)
 
  
 
 
  (d)                                                                                                    (e)
 
 

 
 
(f)
 
图2（b~f表现了初始、平移、缩放、旋转、镜像的不同状态）
 

 这里为什么要谈到WebGL呢？因为性能，因为使用ImageData处理图像，负担全加在了JavaScript上，因为WebGL基于OpenGL ES 2.0，可以编写GLSL ES代码，可以使用GPU加速，从而减轻JavaScript的负担。如图2，实现了图像的底片效果
 动画，窗口右上角显示的帧率始终保持在60FPS左右。为了降低开发难度，这里额外地使用了两个类库，
 CreateJS和
 Three.js。Three.js封装了WebGL而不失灵活性，主要用来创建3D场景，而想绘制如图1所示的自由变换工具这么个有点复杂的2D图形，则不太方便、不太理想。所以，本人的做法是，图像作为纹理交给WebGL和Three.js处理，2D图形则使用HTML5 Canvas 2D和CreateJS(EaselJS)绘制，于是需要两个Canvas上下叠加在一起（可惜同一Canvas不能同时getContext("2d")又getContext("webgl")）。
 

 
 
 

 下面贴出所有代码，没做什么注释。
 

 
 
 

 index.html代码如下：
 

 
<!doctype html>
<html>
	<head>
		<title>ImageTool</title>
		<style>
	        body{
	            margin: 0;
	            overflow: hidden;
	            position: absolute;
				cursor: default	;
	        }
	    </style>
		<script type="text/javascript" src="../libs/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="../libs/easeljs-0.7.1.min.js"></script>
		<script type="text/javascript" src="../libs/three.min.js"></script>
		<script type="text/javascript" src="../libs/stats.js"></script>
		<script type="text/javascript" src="scripts/enjolras.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
	</head>
	<body>
		<canvas></canvas>
		<canvas></canvas>
	</body>
</html>
 
 
 

 index.js代码如下：
 

 
var stage=null,
    ctrlframe=null,
    needToUpdate=true,

    renderer=null,
    scene=null,
    camera=null,
    texture=null,
    picture=null,
    threshold=0,
    sign=1,

    stats=null;

$(function(){
    var winW=window.innerWidth;
    var winH=window.innerHeight;

    $(window).on("resize",onResize);
    //简单起见，canvas铺满整个窗口
    $("canvas").attr("width",winW).attr("height",winH).css("position","absolute");

    $("canvas:eq(1)").on("mousedown",onMouseDown);

    stats = initStats();

    renderer=new THREE.WebGLRenderer({canvas:$('canvas')[0]/*,antialias:true*/});
    renderer.setClearColor(0xEEEEEE, 1.0);
    renderer.setSize(winW, winH);

    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-winW/2,winW/2,winH/2,-winH/2);
    camera.position.set( 0, 0, 200 );
    scene.add( camera );

    texture=new THREE.ImageUtils.loadTexture("assets/imgs/girl.jpg");
    texture.magFilter=THREE.NearestFilter;
    texture.minFilter=THREE.NearestFilter;

    var geometry=new THREE.PlaneGeometry(256,256,1,1);
    var material=new THREE.ShaderMaterial({
        side:THREE.DoubleSide,
        uniforms:{
            map:{type:"t",value:texture},
            threshold:{type:"f",value:1.0}
        },
        vertexShader:[
            "varying vec2 vUV;",
            "void main(){",
                "vUV=uv;",
                "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
            "}"
        ].join("\n"),
        fragmentShader:[
            "varying vec2 vUV;",
            "uniform sampler2D map;",
            "uniform float threshold;",
            "void main(void) {",
                "highp vec4 texColor = texture2D( map, vUV );",
                "if(vUV.s+vUV.t<threshold){",
                    "gl_FragColor = vec4( texColor.rgb, 1.0 );",
                "}else{",
                    "gl_FragColor=vec4(vec3(1.0,1.0,1.0)-texColor.rgb,1.0);",
                "}",
            "}"
        ].join("\n")
    });

    var mesh=new THREE.Mesh(geometry,material);
    scene.add(mesh);

    picture=mesh;
    threshold=material.uniforms.threshold;

    stage=new createjs.Stage($('canvas')[1]);

    var bindObject=new enjolras.BindObject(picture,new createjs.Rectangle(0,0,256,256));

    ctrlframe=new createjs.CtrlFrame(bindObject);

    stage.addChild(ctrlframe);

    onUpdate();

})

function onUpdate(){

    threshold.value+=sign*0.01;

    if(threshold.value>2){
        sign=-1.0;
        threshold.value=2;
    }else if(threshold.value<0){
        sign=1.0;
        threshold.value=0;
    }

    renderer.render(scene,camera);

    if(needToUpdate){//不必每一帧都更新上层画布，否则帧率会掉
        stage.update();
        needToUpdate=false;
    }

    stats.update();

    requestAnimationFrame(onUpdate);

}
function onMouseDown(evt){

    var state=ctrlframe.checkState(evt.clientX,evt.clientY);

    if(state!="still"){
        $("canvas:eq(1)").on("mouseup",onMouseUp);
        $("canvas:eq(1)").on("mousemove",onMouseMove);
    }

    console.log("state:"+state);

}

function onMouseUp(evt){

    $("canvas:eq(1)").off("mouseup",onMouseUp);
    $("canvas:eq(1)").off("mousemove",onMouseMove);

    ctrlframe.checkState(evt.clientX,evt.clientY);

}

function onMouseMove(evt){

    ctrlframe.update(evt.clientX,evt.clientY);

    needToUpdate=true;

}

function onResize(evt){

    var winW=window.innerWidth;
    var winH=window.innerHeight;

    $("canvas").attr("width",winW).attr("height",winH);

    renderer.setSize(winW, winH);
    camera.left=-winW/2;
    camera.right=winW/2;
    camera.top=winH/2;
    camera.bottom=-winH/2;
    camera.updateProjectionMatrix();

    ctrlframe.update();
    needToUpdate=true;

    stats.domElement.style.left = (winW-100)+'px';
}

function initStats() {

    var stats = new Stats();

    stats.setMode(0); // 0: fps, 1: ms

    // Align top-right
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = (window.innerWidth-100)+'px';
    stats.domElement.style.top = '8px';

    $("body").append(stats.domElement);

    return stats;

}
 

 
 
 

 enjolras.js代码如下：
 

 
createjs.CtrlFrame=function(bindObject){

	createjs.Shape.call(this);

	this.sx=1;
	this.sy=1;

	this.dx=0;
	this.dy=0;

	this.state="still";
	this.activeIndex=-1;

	this.circles=null;

	this.bindedObject=null;

	if(bindObject){
		this.bind(bindObject);
	}

}

createjs.CtrlFrame.prototype=Object.create(createjs.Shape.prototype);

createjs.CtrlFrame.prototype.constructor=createjs.CtrlFrame;

createjs.CtrlFrame.prototype.bind=function(bindObject){

	this.bindedObject=bindObject;

	var bounds=bindObject.getBounds();

	this.setBounds(bounds.x,bounds.y,bounds.width,bounds.height);

	this.x=bindObject.x;
	this.y=bindObject.y;
	this.sx=bindObject.scaleX;
	this.sy=bindObject.scaleY;
	this.rotation=bindObject.rotation;

	this.updateCircles();
	this.drawCircles();

};

createjs.CtrlFrame.prototype.updateBindedOject=function(){

	var bindedObject=this.bindedObject;

	bindedObject.x=this.x;
	bindedObject.y=this.y;
	bindedObject.scaleX=this.sx;
	bindedObject.scaleY=this.sy;
	bindedObject.rotation=this.rotation;

};

createjs.CtrlFrame.prototype.drawCircles=function(){

	var i=0,circle=null;
	var circles=this.circles;
	var colors=["red","orange","yellow","green","cyan","blue","purple","pink","lime"];

	var graphics=this.graphics;

	graphics.clear().setStrokeStyle(2).beginStroke("#0af");//beginStroke("#444");

	/*graphics.moveTo(circles[0].x,circles[0].y);
	graphics.lineTo(circles[2].x,circles[2].y);
	graphics.lineTo(circles[8].x,circles[8].y);
	graphics.lineTo(circles[6].x,circles[6].y);
	graphics.lineTo(circles[0].x,circles[0].y);*/
	graphics.drawRect(circles[0].x,circles[0].y,circles[8].x<<1,circles[8].y<<1);
	
	for(i=0;i<this.circles.length;i++){
		/*if(i==4){
			continue;
		}*/
		circle=circles[i];
		graphics.beginFill(colors[i]).drawCircle(circle.x,circle.y,10).endFill();

	}

	graphics.endStroke();

};

createjs.CtrlFrame.prototype.updateCircles=function(){

	var row,col,halfW,halfH;
	var circles=[];
	var bounds=this.getBounds();

	halfW=(bounds.width>>1)*this.sx;
	halfH=(bounds.height>>1)*this.sy;

	for(var i=0;i<9;i++){

		row=Math.floor(i/3);
		col=Math.floor(i%3);

		circles[i]=new createjs.Point((col-1)*halfW,(row-1)*halfH);

	}

	if(this.circles){

		this.circles.splice(0);

	}

	this.circles=circles;

};

createjs.CtrlFrame.prototype.decideActiveIndex=function(){

	var circles=this.circles;

	var bounds=this.getBounds();
	var theta=this.rotation*Math.PI/180;

	var dx=this.dx*Math.cos(-theta)-this.dy*Math.sin(-theta);
	var dy=this.dx*Math.sin(-theta)+this.dy*Math.cos(-theta);

	if(Math.abs(dx)>(bounds.width>>1)*Math.abs(this.sx)+10
		||Math.abs(dy)>(bounds.height>>1)*Math.abs(this.sy)+10){

		this.activeIndex=-1;

	}
	else{

		this.activeIndex=4;

		for(var i=0;i<9;i++){

			if(i==4){

				continue;

			}
			if(Math.abs(dx-circles[i].x)<10&&Math.abs(dy-circles[i].y)<10){

				this.activeIndex=i;

				break;

			}

		}
	}
};

createjs.CtrlFrame.prototype.checkState=function(x,y){

	this.dx=x-this.x;
	this.dy=y-this.y;

	this.decideActiveIndex();	

	switch(this.activeIndex){

		case 4://cyan
			this.state="translate";
			break;
		case 0://red
		case 2://yellow
		case 6://purple
		case 8://lime
		case 5://blue 横向
		case 7://pink 纵向
			this.state="scale";
			break;

		case 1://orange
		case 3://green
			this.state="rotate";
			break;

		default:
			this.state="still";

	}

	return this.state;

};

createjs.CtrlFrame.prototype.update=function(x,y){

	if(x==undefined || this.state=="still"){

		this.updateBindedOject();

		return;
	}

	if(this.state=="translate"){

		this.x=x-this.dx;
		this.y=y-this.dy;

	}else{

		this.dx=x-this.x;
		this.dy=y-this.y;

		if(this.state=="scale"){

			this.scale();

		}else{

			this.rotate();

		}

	}

	this.updateBindedOject();

};

createjs.CtrlFrame.prototype.scale=function(){

	var row=Math.floor(this.activeIndex/3);
	var col=Math.floor(this.activeIndex%3);

	var theta=this.rotation*Math.PI/180;
	var cos=Math.cos(-theta);
	var sin=Math.sin(-theta);

	var bounds=this.getBounds();

	var dx=this.dx*cos-this.dy*sin;
	var dy=this.dx*sin+this.dy*cos;

	if(col!=1){

		this.sx=dx*(col-1)/(bounds.width>>1);

	}
	if(row!=1){

		this.sy=dy*(row-1)/(bounds.height>>1);

	}
	
	this.updateCircles();
	this.drawCircles();

};

createjs.CtrlFrame.prototype.rotate=function(){

	var delta=0;

	if(this.activeIndex==1){

		delta=Math.PI*0.5*(this.sy<0?-1:1);

	}else{

		delta=Math.PI*(this.sx<0?0:1);

	}

	var theta=Math.atan2(this.dy,this.dx)+delta;

	this.rotation=theta*180/Math.PI;

};

var enjolras = enjolras || { };
//建立CreateJS与ThreeJS之间的绑定
enjolras.BindObject=function(picture,bounds){
	this._bounds=bounds;
	this._position=picture.position;
	this._rotation=picture.rotation;
	this._scale=picture.scale;

	console.log("Enjolras: Create a binding between CreateJS and ThreeJS");
};
//WebGL和Three.js采用右手坐标系，初始状态下原点落在Canvas中心
enjolras.BindObject.prototype={
	getBounds:function(){
		return this._bounds;
	},
	get x(){
		return this._position.x+(window.innerWidth>>1);
	},
	set x(value){
		this._position.x=(value-(window.innerWidth>>1));
	},
	get y(){
		return this._position.y+(window.innerHeight>>1);
	},
	set y(value){
		this._position.y=-(value-(window.innerHeight>>1));
	},
	get rotation(){
		return -this._rotation.z*180/Math.PI;
	},
	set rotation(value){
		this._rotation.z=-value*Math.PI/180;
	},
	get scaleX(){
		return this._scale.x;
	},
	set scaleX(value){
		this._scale.x=value;
	},
	get scaleY(){
		return this._scale.y;
	},
	set scaleY(value){
		this._scale.y=value;
	}
};
 
 这里，平移、旋转、缩放都围绕中心点（浅蓝色的点）来进行，没有实现斜切功能，多处为硬编码，可以改进的地方还很多。
 
 
 
 
 

 
 

 

本文参考自: 原文地址
 
一、:首先明确pdf的类型，在自己的开发过程中发现pdf也分几种类型。
 
我目前这里就指出常用两种:
 
一种是交互式pdf，他的组件可以读取，可以被编辑，比如liveCycle（Adobe LiveCycle Designer ES2）一款用于编辑pdf的软件。  （如果强行运行插入方法，不会报错，pdf内存也变大，但是就是无法看到图片）
 
一种是静态pdf,它里面的组件可以读取，不可编辑。
 

 
二、往pdf插入图片的两种方式
 
插入图片需要对插入位置进行定位，这就有两种方式
 
1：获取组件名，以组件为中心进行插入。同时可以将图片大小适应组件大小（比如我获取pdf一个签章域的名字）
 
 public static void main(String[] args) throws Exception {
                // 模板文件路径
                String templatePath = "E://source.pdf";
                // 生成的文件路径
                String targetPath = "E://out.pdf";
                // 关键字名
                String fieldName = "SignatureField1";
                // 图片路径
                String imagePath = "E://00.jpg";


                FileOutputStream fos = new FileOutputStream(targetPath);
                // 读取模板文件
                InputStream input = new FileInputStream(new File(templatePath));
                PdfReader reader = new PdfReader(input);
                PdfStamper stamper = new PdfStamper(reader, fos);
                // 提取pdf中的表单
                AcroFields form = stamper.getAcroFields();
                form.addSubstitutionFont(BaseFont.createFont("STSong-Light","UniGB-UCS2-H", BaseFont.NOT_EMBEDDED));


                // 通过域名获取所在页和坐标，左下角为起点
                int pageNo = form.getFieldPositions(fieldName).get(0).page;
                Rectangle signRect = form.getFieldPositions(fieldName).get(0).position;
                float x = signRect.getLeft();
                float y = signRect.getBottom();
                //x = 20f;
                //y = 40f;
                // 读图片
                Image image = Image.getInstance(imagePath);
                // 获取操作的页面
                PdfContentByte under = stamper.getOverContent(pageNo);
                // 根据域的大小缩放图片
                image.scaleToFit(signRect.getWidth(), signRect.getHeight());
                // 添加图片
                image.setAbsolutePosition(x, y);
                under.addImage(image);
                fos.flush();
                fos.close();
                /*stamper.close();*/
                reader.close();


 
        }
 

 
2：关键字签章，该方式是读取pdf里面的文字，以文字为中心进行定位。其实和上面差不多，只是定位方式变化了而已。
 
public static byte[] signPdfByStampKeyNocert(Object source, URL imagePath, String stampKey) throws Exception {
              //source:待插入图片的pdf ,imagePath ：待插入图片  ， stampKey：关键字（比如 “图片插入在我这”）

 
 // 临时文件路径
 String targetPath = "E://source.pdf";
 
 // 读取模板文件
 PdfReader reader = null;
 if(source instanceof String){
 reader = new PdfReader((String)source);
 }else if(source instanceof byte[]){
 reader = new PdfReader((byte[])source);
 }else if(source instanceof URL){
 reader = new PdfReader((URL)source);
 }
 
 byte [] by1 = null;
 
 PdfStamper stamper = new PdfStamper(reader, new FileOutputStream(targetPath));


 // 则使用座标签章，获取关键字的各类参数 （这个方法我整合了，各位可自行查找）
 Map<String, Object> params = PDFUtil.getSignaturePostionInfo(reader, imagePath, stampKey);


 // 关键字
 Rectangle signRect = (Rectangle) params.get("sign8PositionRectangle");
 // 获取图片的绝对位置，距离
 float x = signRect.getLeft();
 float y = signRect.getBottom();


 // 获取关键字所在页码
 int pageno = (int) params.get("sign8PositionKeywordsPageIndex");
 // 获取操作的页面
 PdfContentByte overContent = stamper.getOverContent(pageno);
 
 Image image = Image.getInstance(imagePath);
 
 // 设置图片宽高
 image.scaleToFit(signRect.getWidth(), signRect.getHeight());
 // image.scaleAbsolute(x, y);
 // 设置图片位置


 image.setAbsolutePosition(x, y);// 左边距、底边距


 overContent.addImage(image);
 overContent.stroke();
 stamper.close();
 reader.close();
 
 byte [] bytes = FileUtil.getFile(targetPath);
 
 FileUtil.delFile(targetPath);
 
 return bytes;
 }