如何设置 jQuery Guillotine 插件？答案

【问题标题】：How to set up jQuery Guillotine Plugin?如何设置 jQuery Guillotine 插件？
【发布时间】：2014-11-30 21:58:46
【问题描述】：

Aloha，我无法让插件工作。这是我的代码，请帮助我：

    <html>
<head>
<script src="style/jquery-1.11.1.min.js"></script> 
<link href="style/jquery.guillotine.css" rel="stylesheet" type="text/css"> 
<script src="style/jquery.guillotine.js"></script> 
<div id="theparent" style="width: 80%;">
  <img id="thepicture" src="http://www.iwallscreen.com/stock/ocean-wallpaper-desktop.jpg">
</div>
<script>
  var picture = $('#thepicture');  // Must be already loaded or cached!
picture.guillotine({width: 400, height: 300});
$('#rotate-left-button').click(function(){
  picture.guillotine('rotateLeft');
});

$('#zoom-in-button').click(function(){
  picture.guillotine('zoomIn');
});

 </script>
  </head>
</html>

Thnaks，阿罗哈 :)

【问题讨论】：

标签： jquery html css image editor

【解决方案1】：

如果我理解正确的话。这样你就得进去了。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset='utf-8'>
  <title>Guillotine demo</title>
  <link href='../css/jquery.guillotine.css' media='all' rel='stylesheet'>
  <link href='demo.css' media='all' rel='stylesheet'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, target-densitydpi=device-dpi'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if lt IE 9]>
    <script src='//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script>
  <![endif]-->
</head>
<body>
  <div id='content'>
    <h1>Guillotine demo</h1>

    <div class='frame'>
      <img id='sample_picture' src='http://lorempixel.com/640/480/city'>
    </div>

    <div id='controls'>
      <button id='rotate_left'  type='button' title='Rotate left'> &lt; </button>
      <button id='zoom_out'     type='button' title='Zoom out'> - </button>
      <button id='fit'          type='button' title='Fit image'> [ ]  </button>
      <button id='zoom_in'      type='button' title='Zoom in'> + </button>
      <button id='rotate_right' type='button' title='Rotate right'> &gt; </button>
    </div>

    <ul id='data'>
      <div class='column'>
        <li>x: <span id='x'></span></li>
        <li>y: <span id='y'></span></li>
      </div>
      <div class='column'>
        <li>width:  <span id='w'></span></li>
        <li>height: <span id='h'></span></li>
      </div>
      <div class='column'>
        <li>scale: <span id='scale'></span></li>
        <li>angle: <span id='angle'></span></li>
      </div>
    </ul>
  </div>

  <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
  <script src='../js/jquery.guillotine.js'></script>
  <script type='text/javascript'>
    jQuery(function() {
      var picture = $('#sample_picture');
      picture.on('load', function(){
        // Initialize plugin (with custom event)
        picture.guillotine({eventOnChange: 'guillotinechange'});
        // Display inital data
        var data = picture.guillotine('getData');
        for(var key in data) { $('#'+key).html(data[key]); }
        // Bind button actions
        $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
        $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
        $('#fit').click(function(){ picture.guillotine('fit'); });
        $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
        $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });
        // Update data on change
        picture.on('guillotinechange', function(ev, data, action) {
          data.scale = parseFloat(data.scale.toFixed(4));
          for(var k in data) { $('#'+k).html(data[k]); }
        });
      });
    });
  </script>
</body>
</html>

【讨论】：

点击此链接CLICK HERE的设置部分
您是否已将其启动到 Angular 2/4 应用程序中？

【解决方案2】：

插件没有添加控制面板，需要根据自己的需要自行制作，并将按钮绑定到动作上。

至少在您提供的示例中，您没有任何控制面板，因此不会显示。

见插件自带demo的22行，在那里你会看到控制面板的定义。

【讨论】：